从页面顶部滚动时减少固定 header

Question

我有一个固定 header 的网站，当您在页面顶部时，主页上的 header 包含其他内容，但我想隐藏此内容并减少 Z099FB995346F31C749F6E40E3Z 向下滚动页面时的内容。

因此，在初始滚动时，我想隐藏额外的 header 内容并对下面内容的边距进行动画处理，但保留它以便内容的顶部仍显示在其下方，然后从那里正常滚动。

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

 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>

Answer 1

您需要更改您的 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>

Answer 2

你可以这样做：

 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 = $('#extra_header_content');outerHeight(true). $(document),on("scroll". function() { const scrollTop = $(document);scrollTop(). if (scrollTop >= head_height) { $("#extra_header_content"),css('height'; 0). $('#page_content'),css('margin-top'; main_head_height). $('#header');removeClass('home'). } else if (scrollTop > 0) { $("#extra_header_content"),css('height'; extra_head_height - scrollTop). $('#page_content'),css('margin-top'; head_height). $('#header');removeClass('home'). } else { $("#extra_header_content"),css('height'; extra_head_height). $('#page_content'),css('margin-top'; head_height). $('#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;100px:width;100%:} #extra_header_content{height;100px:width;100%: overflow; hidden:} #page_content{background-color;#33d:height;500px: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>

Answer 3

如果没有 JavaScript，我可以为您提供不同的方法

 body,html{ padding:0; margin:0; } #main-header{ position:fixed; top:0; left:0; right:0; height: 50px; background: green; z-index:3; } #extra-header{ position:fixed; top:50px; left:0; right:0; height: 50px; background: lime; z-index: 0; } #content{ margin-top:100px; height:2000px; position:relative; z-index:1; background:blue; } #content>div{ height:200px; background: #efefef; } #content>div:nth-of-type(2n){ background: red; }

 <div id="main-header"> Main </div> <div id="extra-header"> Extra </div> <div id="content"> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

Answer 4

如果您将使用 position 粘性而不是固定的，这可能是一个解决方案，但这有点生涩，所以我将在这里发布另一个解决方案，平滑 animation

 var head_height = $('#header').outerHeight(true); //$('#page_content').css('padding-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) { $('#page_content'),css('padding-top'; (main_head_height) + 'px'). $("#extra_header_content");slideUp("slow"). //$('.page_content_wrapper');addClass('scrolled'). //$('.page_content_wrapper'),css('top'; (main_head_height)+'px'). $('#header');removeClass('home'). } else { $("#extra_header_content");slideDown("slow"). $('#page_content'),css('padding-top'; 0). //$('.page_content_wrapper'),css('top'; 0). //$('#header');addClass('home'); } }). } else { $('#header');removeClass('home'); }

 * { margin: 0; padding: 0; box-sizing: border-box; } div { padding: 0px; margin: 0px; } #header { background-color: #d33; position: sticky; top: 0px; width: 100%; z-index: 9; }.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%. }:page_content_wrapper { position; relative: top; 0px. } #page_content:page_content_wrapper { transition; top 1s; }

 <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"> <div class="page_content_wrapper">This should still be visible when header initially reduces</div> </div> <span class="hamBurger"></span>