How can i make my fixed header scroll away when a specific div hits it, or when it is 100px from the top

Question

I can see lots of ways to do the opposite of what i am trying to achieve but noting for what I need.

I have a fixed header that is 100px tall. I want it to scroll away with the rest of the page when a specified div hits the header or it is 100px from the top of the screen.

I had was adding a scroll class to the header which was literally just making it position absolute, causing the header to jump of screen. I then translateY'd it back into view, this didn't work the same across all screen sizes.

My next idea is maybe keeping it fixed but adding a negative transformY to the header, dependent on scroll position. This would achieve the same effect I am going for but i'm not too sure how to achieve this.

If you need any more information then i am happy to provide it.

edit:

Here are some screen shots:

from the top of the page:

Then this is where i want the header to become un-fixed and scroll with the rest of the page:

Answer 1

Check out my solution. Hope this helps.

 const headerEl = document.querySelector('header') const targetEl = document.querySelector('#target') const targetTopPos = targetEl.getBoundingClientRect().top let isHeaderFixed = true document.onscroll = () => { const targetTopOffset = targetEl.getBoundingClientRect().top if (isHeaderFixed && targetTopOffset < 100) { headerEl.style.position = 'absolute' headerEl.style.top = `${targetTopPos - 100}px` isHeaderFixed = !isHeaderFixed } if (!isHeaderFixed && targetTopOffset >= 100) { headerEl.style.position = 'fixed' headerEl.style.top = '0px' isHeaderFixed = !isHeaderFixed } } 

 body { padding: 0; margin: 0; position: relative; } header { position: fixed; height: 100px; width: 100%; background: lightblue; } .content { line-height: 100px; } .target { width: 100%; background: red; } 

 <header> Custom header </header> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit tellus urna, ut tristique felis lobortis sed. Phasellus maximus at magna mattis vulputate. Pellentesque tempor, urna vitae congue pellentesque, est mauris faucibus nulla, vitae molestie leo purus a leo. Curabitur ut mi ac sem finibus consectetur a blandit massa. Morbi ornare tincidunt ipsum, et accumsan erat fringilla a. Cras egestas, nibh vel condimentum ultrices, nunc ipsum tempus magna, eu ullamcorper tortor magna id lacus. Morbi euismod lacus a ligula rutrum, in aliquet lectus blandit. Nam placerat sollicitudin lectus eu ornare. Etiam placerat diam eget magna blandit rutrum. Nulla et luctus massa. Sed sit amet mauris in magna tincidunt consequat. Proin mattis sit amet arcu a gravida. Nullam tempor urna nec dolor convallis consectetur sit amet a elit. Cras ut odio nec lacus efficitur porta nec sit amet justo. </div> <div id="target" class="target">target</div> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit tellus urna, ut tristique felis lobortis sed. Phasellus maximus at magna mattis vulputate. Pellentesque tempor, urna vitae congue pellentesque, est mauris faucibus nulla, vitae molestie leo purus a leo. Curabitur ut mi ac sem finibus consectetur a blandit massa. Morbi ornare tincidunt ipsum, et accumsan erat fringilla a. Cras egestas, nibh vel condimentum ultrices, nunc ipsum tempus magna, eu ullamcorper tortor magna id lacus. Morbi euismod lacus a ligula rutrum, in aliquet lectus blandit. Nam placerat sollicitudin lectus eu ornare. Etiam placerat diam eget magna blandit rutrum. Nulla et luctus massa. Sed sit amet mauris in magna tincidunt consequat. Proin mattis sit amet arcu a gravida. Nullam tempor urna nec dolor convallis consectetur sit amet a elit. Cras ut odio nec lacus efficitur porta nec sit amet justo. </div> 

Answer 2

I should by default make .header {position: absolute} and add this class to css (not to element yet):

.header.active {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

Then understand when we need to carry this event on header. JS will help:

var targetElement = document.querySelector( YOUR TARGET ELEMENT ),
    header = document.querySelector('.header');

window.onscroll = function(event){
  if ( targetElement.offsetTop > window.pageYOffset ) {
    header.classList.add('active');
  } else {
    header.classList.remove('active');
  }
}

Target element is element which when you want to reach it, header will be fixed. If you need