javascript - 如何实现位置:sticky using jQuery or JavaScript?相同的功能

Question

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

我想要实现的功能与 position:sticky 相同，而当滚动到达 #second-header 的顶部时，则将其位置固定在#header 也是固定，但是，#header 的高度未知，我相信可以使用函数计算>outerHeight(true) 在 JQuery 上。

然后伸手到#second-header-container底部后，移除#second-header的固定位置，将其恢复到正常位置。

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

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

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 标题并在第二个 div 的高度内。然后添加一个类，使其粘在主标题下方。我创建了一个 Sticky 类，并在满足滚动条件时添加了它。

请检查以下代码

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>