Как добиться той же функции положения: закрепление с помощью jQuery или JavaScript?

Question

Мне трудно понять, почему приведенный ниже код не работает должным образом.

Я пытаюсь достичь той же функциональности, что и position:sticky, тогда как когда прокрутка достигает вершины #second-header, она фиксирует свое положение ниже #header, что также fixed, однако высота #header неизвестна, и, я полагаю, ее можно рассчитать с помощью функции outerHeight(true) на JQuery.

Затем, после того как дотянется до нижней части #second-header-container, удалите фиксированное положение #second-header, вернув его в нормальное положение.

Из-за проблем совместимости браузера и других настроек я не могу просто использовать position:sticky из css.

Похоже, моя логика c неверна, и мне нужна помощь.

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>