jquery - 位置:固定水平滚动

Question

我正在尝试实现折纸鸟图像的效果，该图像似乎从 Logo 向下延伸，随着查看者滚动，该 Logo 会在页面下方延伸。我已经设法使用 z 轴和固定定位使它工作得相当好，但是一旦页面被放大或调整大小，效果就会被破坏，导致水平滚动开始。我是一个非常业余的人，花了几个小时阅读非常相似的问题和答案，但没有成功。

这就是我要创造的想法http://www.debbiekate.com/indextest.html (我已经发布了特定站点而不是 JFiddle，以便更清楚地说明我想要实现的目标)。

我最接近的方法是将“bird”元素的定位更改为绝对定位并在 JavaScript 中滚动它。 (您可以通过删除 js 的注释标签并将 #bird 的位置样式更改为绝对来查看实际效果)。这正如我所愿 - 鸟在垂直滚动时保持固定位置，但在需要时滚动到左侧，使其与标题 Logo 保持一致并且不会遮挡页面的其余部分。问题是滚动性能非常不稳定，因为据我所知，JS 需要更长的时间才能 catch 滚动事件。我希望效果与使用 position:fixed 时一样平滑。

我已经阅读了很多类似的主题，我认为最接近的是这里:

Fixing a menu in one direction in jquery

这听起来像是一个相同的问题和完美的解决方案，但将 Jsarma 的代码添加到我的网站似乎没有任何效果，我不知道我做错了什么。我没有接受过正式的 Web 开发培训，也不怎么使用 JavaScript，非常感谢您对新手的任何帮助和耐心等待。

Answer 1

您可以将鸟的位置更改为绝对位置而不是固定位置。

然后构建一个 jquery 函数来监听窗口滚动并更改滚动上小鸟的顶部位置。

$(document).ready(function(){
    $(window).scroll(function(){
        //get the current scroll position
        var scrollPosition=$(window).scrollTop();
        //change the top of the bird
        $('#bird').css('top',(-1*scrollPosition)+"px");
    })
});