位置：固定和水平滚动

Question

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

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

我最接近的方法是将“鸟”元素的位置更改为绝对位置并在 JavaScript 中滚动它。 （您可以通过删除 js in 的注释标签并将 #bird 的位置样式更改为绝对样式来看到这一点）。这可以按我的意愿工作 - 垂直滚动时小鸟保持固定位置，但在需要时向左滚动，使其与标题徽标保持一致，并且不会遮挡页面的其余部分。问题是滚动性能非常不稳定，因为据我了解，JS 需要更长的时间才能赶上滚动事件。我希望效果像使用 position:fixed 时一样平滑。

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

Fixing a menu in one direction in jquery

这听起来像是一个相同的问题和完美的解决方案，但将 Jsarma 的代码添加到我的网站似乎没有任何效果，我无法弄清楚我做错了什么。我没有接受过网络开发方面的正式培训，也不太会使用 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");
    })
});