content-visibility and sticky headers

Question

I'm using a sticky header which changes to position:fixed, as soon as you scroll up. For detecting the upwards scroll, I compare the current scrollTop with the old scrolltop – this works perfectly fine!

Now I'm implementing content-visibility for my footer to save some rendering time on the page load.

$(document).ready(function(){
  var lastScrollTop = window.pageOffsetY || 0;
  var isFixed = false;
  $(window).on('scroll', _.throttle(function(){
      var scrollTop = $(window).scrollTop();
      if(scrollTop > 200 && scrollTop < lastScrollTop && !isFixed){
        console.log('stick header');
        $('.header').addClass('header-fixed');
        isFixed = true;
      } else if((scrollTop > lastScrollTop && isFixed) || scrollTop == 0){
        console.log('unstick header');
        $('.header').removeClass('header-fixed');
        isFixed = false;
      }
    lastScrollTop = scrollTop;
  }, 500));
});

.content {
  height: 200vh;
  background-color: grey;
}

.content-visibility {
  content-visibility: auto;
}

.content-inner {
  height: 100px;
  background-color: green;
}

img.content-inner {
  height: auto;
}

.content.content-visibility {
  height: auto;
  background-color: #ddd;
}

.footer {
  background-color: #eee;
}

.header {
  height: 200px;
  background-color: white;
}


.header-fixed {
  position: fixed;
  top: 0;
  width: 100vw;
  left: 0;
  z-index: 10;
}





  
    header
  
  
    content 1
  
  
     
   
    
    
        

    
    
    
    
  
  
   content 2
  
  
    footer

if you scroll down fast, you can see the log statement "stick header", this is wrong and should only happen on scroll up. The problem now is, that at the moment the browser is rendering content-visibility elements, the javascript detects an upwards scroll, because the document height changes (I guess).

Is there any way to prevent this?

user_3257622 · Answer

By adding contain-intrinsic-size the browser knows what the size of the element roughly will be. It doesn't need to be accurate since the browser will eventually calculate the actual height, though the closer you are the less jumping happens.

Sidenote: adding the width and height attribute to a lazyloaded image will tell the browser to reserve space for when it loads reducing content jumps even more.

$(document).ready(function(){
  var lastScrollTop = window.pageOffsetY || 0;
  var isFixed = false;
  $(window).on('scroll', _.throttle(function(){
      var scrollTop = $(window).scrollTop();
      if(scrollTop > 200 && scrollTop < lastScrollTop && !isFixed){
        console.log('stick header');
        $('.header').addClass('header-fixed');
        isFixed = true;
      } else if((scrollTop > lastScrollTop && isFixed) || scrollTop == 0){
        console.log('unstick header');
        $('.header').removeClass('header-fixed');
        isFixed = false;
      }
    lastScrollTop = scrollTop;
  }, 500));
});

.content {
  height: 200vh;
  background-color: grey;
}

.content-visibility {
  content-visibility: auto;
  contain-intrinsic-size: 0 5000px; /* width height */
}

.content-inner {
  height: 100px;
  background-color: green;
}

img.content-inner {
  height: auto;
}

.content.content-visibility {
  height: auto;
  background-color: #ddd;
}

.footer {
  background-color: #eee;
}

.header {
  height: 200px;
  background-color: white;
}


.header-fixed {
  position: fixed;
  top: 0;
  width: 100vw;
  left: 0;
  z-index: 10;
}





  
    header
  
  
    content 1
  
  
     
   
    
    
        

    
    
    
    
  
  
   content 2
  
  
    footer

user_3395805 · Answer

change Event to wheel and everything works fine. The problem on scroll is when your images are loading, your scrollTop variable changes as well ( runs on scroll event). But on Wheel event only runs when you use wheels.

$(document).ready(function(){
  var body = document.body,
    html = document.documentElement;

  var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );
  var lastScrollTop = window.pageOffsetY || 0;
  var isFixed = false;
  $(window).on('wheel touchmove', _.throttle(function(){
      var scrollTop = $(window).scrollTop();
      var newheight = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );
    console.log( height, newheight); 
      if( height !== newheight){
        height = newheight; 
        lastScrollTop = scrollTop;
        return;
      }
      if(scrollTop > 200 && scrollTop < lastScrollTop && !isFixed){
        console.log('stick header');
        $('.header').addClass('header-fixed');
        isFixed = true;
      } else if((scrollTop > lastScrollTop && isFixed) || scrollTop == 0){
        console.log('unstick header');
        $('.header').removeClass('header-fixed');
        isFixed = false;
      }
    lastScrollTop = scrollTop;
  }, 500));
});

.content {
  height: 200vh;
  background-color: grey;
}

.content-visibility {
  content-visibility: auto;
}

.content-inner {
  height: 100px;
  background-color: green;
}

img.content-inner {
  height: auto;
}

.content.content-visibility {
  height: auto;
  background-color: #ddd;
}

.footer {
  background-color: #eee;
}

.header {
  height: 200px;
  background-color: white;
}


.header-fixed {
  position: fixed;
  top: 0;
  width: 100vw;
  left: 0;
  z-index: 10;
}





  
    header
  
  
    content 1
  
  
     
   
    
    
        

    
    
    
    
  
  
   content 2
  
  
    footer

Update: Or! use this new snippet. it checks if the height of the page is changed, if so it updates variables and skips this event from happening.

Add touchmove alonside with wheel to support tuch ( phone ) as well.

content-visibility and sticky headers

2 Answers