javascript - 如何知道窗口顶部何时到达容器的特定顶部？

Question

我正在尝试实现类似于 this 的效果页面显示:当窗口的顶部到达特定容器的顶部时，我希望它粘在窗口的顶部。

我找到了 this SO 中处理这种行为的问题。但是当用户到达特定像素时，我并不是在寻找容器，而是在用户到达容器的开头时。我想要这样，因为页面顶部和容器顶部之间的大小可能会有所不同。

我的问题是:

-> 我怎么知道什么时候到达特定容器的顶部。
-> 如果那个容器的位置是相对的，因为它里面有几个元素是相对定位的，所以我不能使用固定的，我该怎么办？
-> 向上滚动并到达容器所在位置后，如何重置容器？

谢谢

Answer 1

使用这个:

 $(window).scroll(function(e){
 $el = $('.class_of_fixedElement or #id_of_fixedelement');
 if ($(this).scrollTop() > 200 && $el.css('position') != 'fixed'){
 $('.fixedElement').css({'position': 'fixed', 'top': '0px'});
 }
 });

用你想要的任何像素替换 200。只要 scrolltop 到达那里，你的元素就会固定在顶部。