内容可见性和粘性标题

Question

我正在使用粘性标题，position:fixed一旦向上滚动，该标题就会更改为 。为了检测向上滚动，我将当前的滚动顶部与旧的滚动顶部 \xe2\x80\x93 进行比较，这工作得很好！

\n

现在我正在为页脚实现内容可见性，以节省页面加载的一些渲染时间。

\n

\r\n

\r\n

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

\r\n

.content {\n  height: 200vh;\n  background-color: grey;\n}\n\n.content-visibility {\n  content-visibility: auto;\n}\n\n.content-inner {\n  height: 100px;\n  background-color: green;\n}\n\nimg.content-inner {\n  height: auto;\n}\n\n.content.content-visibility {\n  height: auto;\n  background-color: #ddd;\n}\n\n.footer {\n  background-color: #eee;\n}\n\n.header {\n  height: 200px;\n  background-color: white;\n}\n\n\n.header-fixed {\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  left: 0;\n  z-index: 10;\n}

\r\n

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>\n<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>\n\n<div class="container">\n  <div class="header">\n    header\n  </div>\n  <div class="content">\n    content 1\n  </div>\n  <div class="content-visibility">\n     <img loading="lazy" class="content-inner" src="https://via.placeholder.com/301x310">\n   <img loading="lazy" class="content-inner" src="https://via.placeholder.com/302x303">\n    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/302x340">\n    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/303x340">\n        <div style="height:200px"></div>\n\n    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/304x340">\n    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/305x340">\n    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/306x340">\n    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/307x340">\n  </div>\n  <div class="content">\n   content 2\n  </div>\n  <div class="footer content-visibility">\n    footer\n   <img loading="lazy" class="content-inner" src="https://via.placeholder.com/301x300">\n   <img loading="lazy" class="content-inner" src="https://via.placeholder.com/302x300">\n    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/302x300">\n    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/303x300">\n    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/304x300">\n    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/305x300">\n    <div style="height:200px"></div>\n    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/306x300">\n    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/307x300">\n  </div>\n</div>

\r\n

\r\n

\r\n

\n

如果你快速向下滚动，你可以看到日志语句“stick header”，这是错误的，应该只在向上滚动时发生。\n现在的问题是，当浏览器正在呈现内容可见性元素时，javascript 检测到向上滚动，因为文档高度发生变化（我猜）。

\n

有什么办法可以防止这种情况发生吗？

\n

Answer 1

通过添加contains-intrinsic-size ，浏览器知道元素的大致大小。它不需要准确，因为浏览器最终会计算实际高度，尽管距离越近，跳跃发生的次数就越少。

\n

旁注：向延迟加载的图像添加width和height属性将告诉浏览器在加载时预留空间，从而进一步减少内容跳转。

\n

\r\n

\r\n

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

\r\n

.content {\n  height: 200vh;\n  background-color: grey;\n}\n\n.content-visibility {\n  content-visibility: auto;\n  contain-intrinsic-size: 0 5000px; /* width height */\n}\n\n.content-inner {\n  height: 100px;\n  background-color: green;\n}\n\nimg.content-inner {\n  height: auto;\n}\n\n.content.content-visibility {\n  height: auto;\n  background-color: #ddd;\n}\n\n.footer {\n  background-color: #eee;\n}\n\n.header {\n  height: 200px;\n  background-color: white;\n}\n\n\n.header-fixed {\n  position: fixed;\n  top: 0;\n  width: 100vw;\n  left: 0;\n  z-index: 10;\n}

\r\n

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>\n<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>\n\n<div class="container">\n  <div class="header">\n    header\n  </div>\n  <div class="content">\n    content 1\n  </div>\n  <div class="content-visibility">\n     <img loading="lazy" class="content-inner" src="https://via.placeholder.com/301x310" width="301" height="310">\n   <img loading="lazy" class="content-inner" src="https://via.placeholder.com/302x303" width="302" height="303">\n    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/302x340" width="302" height="340">\n    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/303x340" width="303" height="340">\n        <div style="height:200px"></div>\n\n    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/304x340" width="304" height="340">\n    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/305x340" width="305" height="340">\n    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/306x340" width="306" height="340">\n    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/307x340" width="307" height="340">\n  </div>\n  <div class="content">\n   content 2\n  </div>\n  <div class="footer content-visibility">\n    footer\n   <img loading="lazy" class="content-inner" src="https://via.placeholder.com/301x300" width="301" height="300">\n   <img loading="lazy" class="content-inner" src="https://via.placeholder.com/302x300" width="302" height="300">\n    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/302x300" width="302" height="300">\n    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/303x300" width="303" height="300">\n    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/304x300" width="304" height="300">\n    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/305x300" width="305" height="300">\n    <div style="height:200px"></div>\n    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/306x300" width="306" height="300">\n    <img loading="lazy" class="content-inner" src="https://via.placeholder.com/307x300" width="307" height="300">\n  </div>\n</div>

\r\n

\r\n

\r\n

\n