javascript - 使用水平滚动将 Div 位置从绝对位置更改为固定位置

Question

我在 https://github.com/brandonaaron/jquery-mousewheel 有一个使用水平滚动插件水平滚动的网站.那里没有问题。

我的问题是，我有一个 250 像素宽、100% 高度的 div，它从屏幕右侧开始 100 像素。当我(水平)滚动时，div 向左滚动并最终从屏幕上消失。 div 的位置设置为绝对。我想要的是，一旦 div 到达浏览器窗口的左侧，div 就会固定在屏幕的左侧。

我猜我需要使用 JS 来更改 div 到达屏幕上特定位置(最左边)后的 CSS。我已经看到不少网站通过垂直滚动实现了这一点，菜单栏一旦到达顶部就会固定在屏幕顶部。菜单可能已经从页面的一半开始，并在滚动时向上移动。我只是想在水平面上实现相同的效果。

总的来说，我对代码还比较陌生，对 Javascript 也是全新的。我可能贪多嚼不烂，但我喜欢挑战。感谢任何人的帮助。

我要更改的 CSS 代码是

#header {
    width: 250px;
    background: rgba(22,22,22,.85);
    height: 100%;
    position: absolute;
    margin-left: calc(100% - 350px);
    z-index: 999;
}

然后改为

#header {
    width: 250px;
    background: rgba(22,22,22,.85);
    height: 100%;
    position: fixed;
    margin-left: 0px;
    z-index: 999;
}

Answer 1

根据我从您的问题中理解的内容，这是我尝试过的..是的，我有用户 javascript..

HTML:

<div id="headerSlideContainer">

    <div id="headerSlideContent">

        Header content goes here!

    </div>
    <div id="new">
        Other Contents
    </div>

</div>

CSS:

#headerSlideContainer {
    position: absolute;

    top:0px;
    width: 100%;

   height:1000px;
    background: black;
}
#headerSlideContent {
    width: 250px;
    background-color:red;
    height: 100%;
    position: fixed;
    margin-left: 0px;
    z-index: 999;
}

#new{
    top:60px;
    z-index:2;
    height:100px;
    background:Orange;
    position:absolute;
    color: white;

}

和 js:

$(function() {

    var bar = $('#headerSlideContainer');
    var top = bar.css('top');
    $(window).scroll(function() {

        if($(this).scrollright() > 100) {
            bar.stop().animate({'top' : '5px'}, 500);
        } else {
            bar.stop().animate({'top' : top}, 500);
        }
    });
});

根据需要更改 scrollright 数量.. 如果 scrollright 不起作用，请尝试 scrollleft().. 如果您有任何问题，请告诉我..