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

我有一个网站，水平滚动使用水平滚动插件在。没问题

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

我猜，一旦div到达屏幕上的某个特定位置（最左边），我就需要使用JS来更改它的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;
}

---

根据我从你的问题中了解到的情况，这就是我所尝试的。。是的，我有用户javascript

HTML:

和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不起作用，请尝试scrollleft（）。。如果您有任何问题，请告诉我。

这里有一篇文章解释如何垂直执行此操作，但同样的概念也应适用于您的案例

本教程：

---

演示：

如果您提供了一些您所做的工作，我指的是代码。。那我们肯定能帮你。。这似乎不是什么大问题，但你需要向我们展示一些代码，以便我们能够处理它。嗨，考希克。谢谢你的回复。我已经添加了CSS，我认为需要在上面的问题中进行更改。我希望这对你有帮助。谢谢你的链接。我会检查一下，然后告诉你我的进展。谢谢你，伙计。感谢你的回答。我会告诉你我该怎么做，如果对我有用的话。嘿，伙计。我现在正在玩它。检查这个链接，看是否有我正在使用的虚拟侧滚动。我只是想确保我解释得很好。你可能需要在Chrome中加载它，因为我现在只在玩，并且只在那里测试过。K。。对我来说，这是一个很难理解的情景。。好的，上面的技巧，无论我提到的答案是什么，都肯定会起作用，可能需要根据你的要求进行一些返工。。你还必须利用z指数，这将是这项训练的主要部分。。你知道该怎么做还是我该怎么做…：）随时都可以，兄弟。。祝你一切顺利……：）

#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;

}

$(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);
        }
    });
});