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

Question

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

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

我的问题是：

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

谢谢

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。只要滚动顶部到达那里，你的元素就会固定到顶部。