动态修复div时停止闪烁

Question

一旦div的位置从窗口视图中滚动出来，我就将其固定在窗口的底部。然后，当它的位置滚动回视图时，我会"取消固定"它。如果滚动得很慢，就会出现可怕的位置闪烁。有办法解决这个问题吗？

演示https://jsfiddle.net/3146nxLx/

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的位置发生变化时，触发器的位置不会移动。

演示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值，以便过渡更加平滑。是，也给它一个左值。

演示https://jsfiddle.net/3146nxLx/3/

这里有一个例子，半基于@Lionel提出的逻辑。你可以克隆div然后添加它。这也意味着你不需要触发器。

演示https://jsfiddle.net/3146nxLx/4/

Answer 2

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

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

这是Fidde