Question

一旦它的位置滚出窗口视图，我就将div固定在窗口的底部。然后，当它的位置滚动回视图时，我'解除'它。如果滚动缓慢完成，则会出现可怕的位置闪烁。有没有办法解决这个问题？

var initSet = false;
$(window).scroll(function() {
  if (isScrolledIntoView($('#myDivTrigger'))) {
    if (!initSet) {
      initSet = true;
    }
    $("#myDiv").removeClass('fixed');
  } else if (initSet) {
    $("#myDiv").addClass('fixed');
  }
});

function isScrolledIntoView(elem) {
  var $elem = $(elem);
  var $window = $(window);

  var docViewTop = $window.scrollTop();
  var docViewBottom = docViewTop + $window.height();

  var elemTop = $elem.offset().top;
  var elemBottom = elemTop + $elem.height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

Answer 1

这是因为你正在设置一个固定的元素，然后trigger会弹出它的位置，从而变得可见。您需要创建一个包装器，给它一个相对位置，然后将触发器设置为绝对位置。这样，当固定div的位置改变时，触发器的位置不会移动。

DEMO https://jsfiddle.net/3146nxLx/1/

<div id="myDivWrap">
  <div id="myDiv">
    <p>
      This should be fixed once it comes into view and then goes out of view.
    </p>
  </div>
  <span id="myDivTrigger">trigger</span>
</div>

您甚至可以为触发器指定bottom值，以便过渡更顺畅。是的，也给它一个左值。

DEMO https://jsfiddle.net/3146nxLx/3/

这是一个例子，半基于@Lionel建议的逻辑。您克隆div然后添加它。这也意味着您不需要触发器。

DEMO https://jsfiddle.net/3146nxLx/4/

Answer 2

是的，将position: fixed;设置为myDiv浏览器后，问题就是bcz将其从正常的DOM流中移除...

您可以将高度应用于包装器，然后注册滚动处理程序。这是另一种可能的解决方案，无需克隆或使用额外的块..

这是Fidde

动态修复div时停止闪烁

2 个答案: