javascript - 滚动时固定位置菜单直到到达相对容器的底部

Question

我正在尝试模拟 Yelp 对其 Mo Map 所做的事情。

我知道如何在元素到达某个屏幕滚动位置后将其翻转到固定位置，但是一旦它到达相对容器的底部，如何关闭固定位置？

css sticky position解决了这个问题，但由于它相当新，所以覆盖范围不大。

Answer 1

您可以尝试执行以下操作:little link .

这是 JavaScript 的注释版本:(注意:这使用了 jQuery，但这不是必需的。如果您需要纯 JavaScript 版本，我很乐意提供一些提示)

var oritop = -100;
$(window).scroll(function() { //on scroll,
    var scrollt = window.scrollY; //get the amount of scrolling
    var elm = $(".box"); //get the box we want to make sticky
    if(oritop < 0) {
        oritop= elm.offset().top; //cache the original top offset
    }
    if(scrollt >= oritop) { //if you scrolled past it,
        elm.css({"position": "fixed", "top": 0, "left": 0}); //make it sticky
    }
    else { //otherwise
        elm.css("position", "static"); //reset it to default positioning
    }
});