看看 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' 事件,以确保固定元素最终出现在正确的位置。如果你不这样做,那么你的粘性元素会尝试覆盖整个页面或做其他奇怪的事情。
祝你好运!