javascript - 滚动父 DIV 时修复元素

Question

我想修复右侧的“图标以修复”div，如果它位于 View 的中间。但它应该只固定到 View 到达红色框的末尾..

目前我正在使用 Bootstrap 和 jQuery - 你会如何解决这个问题？

Answer 1

我查看了您发布的图片，并在 jsBin 上创建了这个看起来相似的演示。不需要整个插件。 JQuery 和一些 CSS 应该会处理这个问题。

http://jsbin.com/libatajure/edit?css,js,output

代码的核心在这里:

// Check if element totally above or totally below viewport
if (top + height - followHeight < pos || top > pos + window_height) {
  return;
}

var offset = parseInt($(window).scrollTop() - top);

if (offset > 0) {
$follow.css('transform', 'translateY('+ offset +'px)');
}

看到蓝色元素如何仅在其父元素可见时滚动，并在父元素超出视口(viewport)时停止吗？希望对您有所帮助!