时间戳

首页 > 解决方案 > 减少从页面顶部滚动时的固定标题

javascript - 减少从页面顶部滚动时的固定标题

问题描述

我有一个带有固定标题的网站，在主页上，当您位于页面顶部时，标题包含其他内容，但我想隐藏此内容并在向下滚动页面时缩小标题。

因此，在初始滚动时，我想隐藏额外的标题内容并为下面内容的边距设置动画，但保留它以便内容的顶部仍然显示在它下面，然后从那里正常滚动。

下面的片段应该更好地说明我的意思：

var head_height = $('#header').outerHeight(true);
$('#page_content').css('margin-top', (head_height)+'px');

if($('#extra_header_content').length != 0){
    $('#header').addClass('home');
    
    var main_head_height = $("#main_header_content").outerHeight(true);
    var extra_head_height = $('#header').outerHeight(true);
    
    $(document).on("scroll", function(){
        if($(document).scrollTop() >= main_head_height){
            $("#extra_header_content").slideUp("slow");
            $('#page_content').css('margin-top', (main_head_height)+'px');
            $('#header').removeClass('home');
        }else{
            $("#extra_header_content").slideDown("slow");
            $('#page_content').css('margin-top', (extra_head_height)+'px');
            $('#header').addClass('home');
        }
    });
}else{
    $('#header').removeClass('home');
}
div{padding:0px;margin:0px;}

#header{background-color:#d33;position:fixed;top:0px;width:100%;}
.home{background-color:#3d3 !important;}

#main_header_content{height:50px;width:100%;}
#extra_header_content{height:50px;width:100%;}

#page_content{background-color:#33d;height:5000px;width:100%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
  <div id="main_header_content">Main header</div>
  <div id="extra_header_content">Extra Header</div>
</div>
<div id="page_content">This should still be visible when header initially reduces</div>

标签： javascripthtmljquerycssbootstrap-4

解决方案

您需要更改您的 JS 代码。当页面开始滚动时，您正在减少的边距需要通过填充进行调整。所以你可以试试这个：

var head_height = $('#header').outerHeight(true);
    $('#page_content').css('margin-top', (head_height)+'px');

    if($('#extra_header_content').length != 0){
        $('#header').addClass('home');
        
        var main_head_height = $("#main_header_content").outerHeight(true);
        var extra_head_height = $('#header').outerHeight(true);
        
        $(document).on("scroll", function(){
            if($(document).scrollTop() >= main_head_height){
                $("#extra_header_content").slideUp("slow");
                // $('#page_content').css('margin-top', (main_head_height)+'px');
                $('#page_content').css(
                  {'margin-top': (main_head_height)+'px', 'padding-top': (main_head_height)+'px'}
                );
                $('#header').removeClass('home');
            }else{
                $("#extra_header_content").slideDown("slow");
                $('#page_content').css('margin-top', (extra_head_height)+'px');
                $('#header').addClass('home');
            }
        });
    }else{
        $('#header').removeClass('home');
    }
div{padding:0px;margin:0px;}

#header{background-color:#d33;position:fixed;top:0px;width:100%;}
.home{background-color:#3d3 !important;}

#main_header_content{height:50px;width:100%;}
#extra_header_content{height:50px;width:100%;}

#page_content{background-color:#33d;height:5000px;width:100%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
  <div id="main_header_content">Main header</div>
  <div id="extra_header_content">Extra Header</div>
</div>
<div id="page_content">This should still be visible when header initially reduces</div>

推荐阅读