Question

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

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

我最接近的是将'bird'元素的位置更改为绝对并在JavaScript中滚动它。（您可以通过删除js的注释标记并将#bird的位置样式更改为绝对来看到此操作）。这可以按照我的意愿工作 - 当垂直滚动时，鸟仍然固定在适当位置，但在需要时滚动到左侧，使其与标题徽标保持一致，而不会遮挡页面的其余部分。问题是滚动性能非常不稳定，因为我需要更长的时间来跟上滚动事件，因为我理解它。我希望效果像使用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");
    })
});

位置：固定和水平滚动

1 个答案: