如何实现与 position 相同的 function:sticky using jQuery 或 Z686155AF75A60A0F6EZD80C1

Question

我很难弄清楚为什么下面的代码不能按预期工作。

我想要实现的是与position:sticky相同的功能，而当滚动到达#second-header的顶部时，然后将其 position 固定在#header下方，这也是fixed的，但是，#header 的#header是未知的我相信可以使用 JQuery 上的 function outerHeight(true)来计算。

然后在到达#second-header-container的底部后，移除#second-header second-header 的固定position 使其恢复正常position。

由于浏览器兼容性问题和其他自定义，我不能简单地使用position:sticky的 css。

看来我的逻辑是错误的，我需要帮助。

 jQuery(document).ready(function(){ var $document = jQuery(document); var header = jQuery('#header'); var second_header = jQuery('#second-header-container').find('#second-header'); var second_header_container = jQuery('#second-header-container'); var second_header_offset = second_header.offset().top; var second_header_container_offset = second_header_container.offset().top; jQuery(window).scroll(function(){ var top_margin = header.outerHeight(true); var second_header_height = second_header.outerHeight(true); var second_header_container_height = second_header_container.outerHeight(true); if( jQuery(window).scrollTop() > (second_header_offset - second_header_height) && jQuery(window).scrollTop() < second_header_container_height) { second_header.addClass('fixer'); second_header.css({position:'fixed', top:top_margin, 'z-index':'999999'}); } else { second_header.removeClass('fixer'); second_header.css({position:'relative', top:'0px', 'z-index':'0'}); } }); });

 *{ color: #FFFFFF; padding: 0; margin: 0; }.fixer{ position: fixed; width: 100%; } #header, .banner, #second-header, .contents{ padding: 5px; } #header{ position: fixed; width: 100%; height: 74px; z-index: 99999; background-color: #000000; }.banner{ padding-top: 84px; height: 200px; background-color: #583E5B; } #second-header-container{ min-height: 300px; background-color: #775F5E; } #second-header{ padding-bottom: 10px; padding-top: 10px; background-color: #4C3D3C; }.contents{ min-height: 200px; background-color: #97A36D; }.footer{ background-color: #80A379; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <header id="header">HEADER</header> <div class="banner">BANNER</div> <div id="second-header-container"> <div id="second-header">SECOND-HEADER</div> <.--Other contents and elements...--> </div> <div class="contents">OTHER...</div> <footer class="contents footer">FOOTER</footer>

Answer 1

为此，您需要首先检查滚动高度是否在第二个 div header 附近并且在第二个 div 的高度内。 然后添加一个 class 使其粘在主 header 下方。 我创建了一个sticky class 并在满足滚动条件时添加它。

请检查以下代码

 jQuery(document).ready(function() { var headerHeight = $('#header').outerHeight(true); var secondHeaderContainer = $('#second-header-container'); const secondHeaderTopPos = secondHeaderContainer.offset().top; const secondHeaderContainerHeight = $(secondHeaderContainer).height(); $(window).scroll(function() { const scrollTop = $(this).scrollTop(); const secondContainerHeightEnd = secondHeaderContainerHeight + secondHeaderTopPos - $('#second-header').height() - headerHeight; if (((secondHeaderTopPos - headerHeight) <= scrollTop) && (secondContainerHeightEnd >= scrollTop)) { $('#second-header').addClass('sticky').css('top', headerHeight); } else { $('#second-header').removeClass('sticky'); } }); });

 * { color: #FFFFFF; padding: 0; margin: 0; }.sticky { position: fixed; width: 100%; top: 0; left: 0; }.fixer { position: fixed; width: 100%; } #header, .banner, #second-header, .contents { padding: 5px; } #header { position: fixed; width: 100%; height: 74px; z-index: 99999; background-color: #000000; }.banner { padding-top: 84px; height: 200px; background-color: #583E5B; } #second-header-container { min-height: 300px; background-color: #775F5E; } #second-header { padding-bottom: 10px; padding-top: 10px; background-color: #4C3D3C; }.contents { min-height: 200px; background-color: #97A36D; }.footer { background-color: #80A379; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <header id="header">HEADER</header> <div class="banner">BANNER</div> <div id="second-header-container"> <div id="second-header">SECOND-HEADER</div> <.--Other contents and elements...--> </div> <div class="contents">OTHER...</div> <footer class="contents footer">FOOTER</footer>