Question

如何判断元素是否在另一个固定在顶部的元素后面滚动？

我想要做的是在元素位于固定元素下方时运行一些javascript，然后在每个高度或者scrollTop之后运行。

我正在尝试做一个粘性标题，但我不能只在scrollTop上进行固定定位，因为随着视口变小，我将粘贴定位的元素向下推，这意味着需要使用不同的scrollTop来修复元素然后。

这就是为什么我认为当元素位于已经固定在顶部的元素下时，修复/粘贴元素会更容易。

我试过了： position:sticky;及其带有这两个polyfill的供应商前缀：

Answer 1

看看Sticky Kit，看起来它具备处理您的情况所需的功能：http://leafo.net/sticky-kit/

最重要的是，您可以提出一个事件，告诉它在内容发生变化时重新计算粘性位置。

例如：

$(window).on('resize', function(){
    $(document.body).trigger('sticky_kit:recalc');
});

修改

我已经快速查看了您的网站。

要实现此功能，您需要将#filter和#main元素移至<body>下的共享父级 - 所以不要是<body>的直接子级：

<body> <div> <section id="filter"> ... </section> <main id="main"> ... </main> </div> </body>

然后在main.js文件中删除整个$(window).scroll()处理程序，不需要它。在大多数情况下，让sticky-kit处理元素需要的位置的计算：

// Removed $(window).scroll(...) $('#filter').stick_in_parent(); $(window).on('resize', function(){ $(document.body).trigger('sticky_kit:recalc'); });

最后，您需要在动画和slideToggle效果完成后引发'sticky_kit：recalc'事件，以确保固定元素最终位于正确的位置。如果你不这样做那么你的粘贴元素将试图覆盖整个页面或做其他奇怪的事情。
祝你好运！

如果元素在固定位置元素后面滚动

1 个答案: