Question

当你在滚动中找到它时，我的页面上有一个固定的元素。此元素有时可以包含高于它但不低于它的内容，这意味着页面深度可能不足以支持这种行为，因此它可以防止用户到达页面底部并导致页面反弹，大概是因为它在修复时从滚动中删除了元素，这导致滚动事件函数中的条件不再成立。当发生这种情况时，gif会显示出不良影响。

在这个小提琴中展示：https://jsfiddle.net/dcsjx625/8/

页面是动态的，因此无法删除单个页面的效果。

<body>
  <div class="header">
    <img src="http://placehold.it/600x401">
  </div>
  <div class="content-parent">
    <div class="content">
      <img src="http://placehold.it/600x400">
      <img src="http://placehold.it/600x400">
      <img src="http://placehold.it/600x400">
    </div>
  </div>
  <div class="footer-content">
  Footer
  </div>
</body>

jQuery的：

var $stickyChainOffset = $('.content').offset();
var $stickyChain = $('.content');
var $fixedWidth = $('.content').parent().width();

function checkScroll() {
  if ($(window).scrollTop() > $stickyChainOffset.top - 100) {
    $stickyChain.css('position', 'fixed').css('top', '100px').css('max-width', $fixedWidth);
  } else {
    $stickyChain.css('position', 'static').css('max-width', 'initial');
  }
};

$(window).scroll(function() {
  checkScroll();
});

/* Updates the $fixedWidth variable on resize */
$(window).resize(function() {
  $fixedWidth = $('.content').parent().width();
  $(window).scroll();
});

理想情况下，如果元素足够接近页面底部可能会导致问题，我想要防止粘附效果。

我已尝试计算checkScroll()函数中的页面深度与元素高度，但即使这样也无效。我觉得我正处于解决这个问题的边缘。：

function checkScroll() {
  height = $stickyChain.height() + 100;
  depth = $(document).height() - $stickyChainOffset.top;

  if ($(window).scrollTop() > $stickyChainOffset.top - 100 && depth > height) {
    $stickyChain.css('position', 'fixed').css('top', '100px').css('max-width', $fixedWidth);
  } else {
    $stickyChain.css('position', 'static').css('max-width', 'initial');
  }
};

任何帮助将不胜感激！

Answer 1

我说实话，我理解你的问题，但我不知道你何时以及为什么会遇到这种确切的行为。也就是说，这是我的解决方法和一些注意事项：

内容的高度需要是fixed元素高度的2倍才能维护滚动条。否则，一旦元素为fixed，您的文档就会完全丢失滚动条。
我将fixed元素的原始偏移量保存到一个变量中，该变量用作将来重置的标记。但是，我也在每次滚动事件中重新定义$stickyChainOffset，您曾经只定义过一次。我这样做是因为它改变了一次fixed。
您可以对我在css中保存的填充进行评论和取消注释，以查看该页面在各种情况下的行为。

如果您有任何其他问题，请与我们联系。

https://jsfiddle.net/1fke1j3d/1/

使用固定定位滚动弹跳

1 个答案: