javascript - 内容可见性和粘性标题

Question

我正在使用更改为 position:fixed 的粘性标题，只要你向上滚动。为了检测向上滚动，我将当前的滚动顶部与旧的滚动顶部进行了比较——这非常有效!
现在我正在为我的页脚实现内容可见性，以节省页面加载时的一些渲染时间。

$(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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

<div class="container">
  <div class="header">
    header
  </div>
  <div class="content">
    content 1
  </div>
  <div class="content-visibility">
     <img loading="lazy" class="content-inner" src="https://via.placeholder.com/301x310">
   <img loading="lazy" class="content-inner" src="https://via.placeholder.com/302x303">
    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/302x340">
    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/303x340">
        <div style="height:200px"></div>

    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/304x340">
    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/305x340">
    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/306x340">
    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/307x340">
  </div>
  <div class="content">
   content 2
  </div>
  <div class="footer content-visibility">
    footer
   <img loading="lazy" class="content-inner" src="https://via.placeholder.com/301x300">
   <img loading="lazy" class="content-inner" src="https://via.placeholder.com/302x300">
    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/302x300">
    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/303x300">
    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/304x300">
    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/305x300">
    <div style="height:200px"></div>
    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/306x300">
    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/307x300">
  </div>
</div>

如果你快速向下滚动，你可以看到日志语句“stick header”，这是错误的，应该只在向上滚动时发生。
现在的问题是，在浏览器呈现内容可见性元素的那一刻，javascript 检测到向上滚动，因为文档高度发生了变化(我猜)。
有什么办法可以防止这种情况发生吗？

Answer 1

通过添加 contain-intrinsic-size浏览器大致知道元素的大小。它不需要准确，因为浏览器最终会计算实际高度，尽管你越靠近跳跃发生的越少。
旁注:添加 width和 height延迟加载图像的属性将告诉浏览器在加载时保留空间，以减少内容跳转。

$(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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

<div class="container">
  <div class="header">
    header
  </div>
  <div class="content">
    content 1
  </div>
  <div class="content-visibility">
     <img loading="lazy" class="content-inner" src="https://via.placeholder.com/301x310" width="301" height="310">
   <img loading="lazy" class="content-inner" src="https://via.placeholder.com/302x303" width="302" height="303">
    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/302x340" width="302" height="340">
    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/303x340" width="303" height="340">
        <div style="height:200px"></div>

    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/304x340" width="304" height="340">
    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/305x340" width="305" height="340">
    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/306x340" width="306" height="340">
    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/307x340" width="307" height="340">
  </div>
  <div class="content">
   content 2
  </div>
  <div class="footer content-visibility">
    footer
   <img loading="lazy" class="content-inner" src="https://via.placeholder.com/301x300" width="301" height="300">
   <img loading="lazy" class="content-inner" src="https://via.placeholder.com/302x300" width="302" height="300">
    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/302x300" width="302" height="300">
    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/303x300" width="303" height="300">
    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/304x300" width="304" height="300">
    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/305x300" width="305" height="300">
    <div style="height:200px"></div>
    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/306x300" width="306" height="300">
    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/307x300" width="307" height="300">
  </div>
</div>