如何使用 Javascript 解决多个粘性标题问题？

Question

I have a two headers.

-----------------
   Header 1
----------------

----------------
     Slider
----------------

----------------
   Header 2
----------------

On scroll Header 1 will be sticky. And after crossing Slider Header 2 will be sticky with Header 1.

-----------------
   Header 1
----------------
----------------
   Header 2
----------------

How is this possible?

I have done some part:

window.onscroll = function() {
    myFunction()
};

var header2 = document.getElementById("masthead2");
var header3 = document.getElementById("myHeader");

var sticky2 = header2.offsetTop;
var sticky3 = header3.offsetTop;


function myFunction() {

  if(window.pageYOffset > sticky2)
  {
    header2.classList.add("sticky");
  }
  else
  {
    header2.classList.remove("sticky");
  }


  if (window.pageYOffset > sticky3) {
    header3.classList.add("sticky1");
  } 
  else {
    header3.classList.remove("sticky1");
  }
}

But in this code, Header 2 is going to top: 0 and then make it sticky with Header 1. I need while window will cross the slider then it will be sticky with Header 1.

Given code in codepen.io

https://codepen.io/blackbird36/pen/PowwyRJ

Answer 1

You can relay only on CSS via position:sticky;

example :

 .header { padding: 10px 16px; background: #555; color: #f1f1f1; z-index: 999999; } .sticky { position: sticky; top: 0; width: 100%; } .sticky1 { position: sticky; top: 40px; width: 100%; }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <header id="masthead2" class="header-default affix-top header sticky"> <div class="row"> <div class="header-menu col-sm-12 tm-table"> <ul class="nav main-menu col-md-10"> <li class="menu-item has-children"> <a href="index.html">Home</a> </li> <li class="menu-item has-children"> <a href="rooms.html">Rooms</a> </li> </ul> </div> </div> </header> <img src="https://dummyimage.com/600x400/000/fff" alt=""> <div class="header sticky1" id="myHeader"> <h2>My Header</h2> </div> <div class="content"> <h3>On Scroll Sticky Header</h3> <p>The header will stick to the top when you reach its scroll position.</p> <p>Scroll back up to remove the sticky effect.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <h3>On Scroll Sticky Header</h3> <p>The header will stick to the top when you reach its scroll position.</p> <p>Scroll back up to remove the sticky effect.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> </div> </div>

You can check support on sticky here : https://caniuse.com/#search=sticky

https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky

sticky The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.

Answer 2

Please remove your jquery and replace below CSS

.header {
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
  z-index: 999999;
  position: sticky;
   top: 0;
}

#myHeader{
  top: 44px;
}