固定位置的滚动弹跳

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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

理想情况下，如果元素距离页面底部足够近，可能会引起问题，我想防止出现粘连现象。

我已经试过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');
  }
};

Run Code Online (Sandbox Code Playgroud)

任何帮助将不胜感激！

Answer 1

Ser*_*ata 3

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

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

如果您还有其他问题，请告诉我。

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

归档时间：	9 年，5 月前
查看次数：	1667 次
最近记录：	9 年，5 月前