Question

我想使用jQuery，当您向下滚动300px时，将background-color: rgba(46,49,54,0);设置为background-color: rgba(46,49,54,1);。

已经有类似的问题了，但这是采用浏览器高度和动画来设置高度而不是像素。

https://stackoverflow.com/a/27576112/4666639

所以有人可以根据滚动距离（以像素为单位）帮助我制作导航栏背景动画吗？

Answer 1

$(document).scroll(function() {
    if (300 >= $(this).scrollTop()) {
        $('nav').css('background', 'rgba(46,49,54,' + $(this).scrollTop() / 300 + ')');
    } else {
        $('nav').css('background', 'rgba(46,49,54,1)')
    }
});

这很有效。我编辑了其他问题的答案并删除了var dHeight并将其替换为静态像素。

编辑：如果页面已滚动，我已添加后备广告，然后重新加载else {}

Answer 2

您希望根据用户滚动的距离判断nav背景颜色的动画。

您需要将代码存储在侦听滚动的事件中 - $(document).scroll( // code );并捕获用户滚动距离的距离$(this).scrollTop()我认为您知道这一切。

例如，您选择的颜色为rgba(46,49,54,0)，并且您希望根据滚动距离动态更改颜色/不透明度。

这是理论上的解决方案"rgba(46,49,54,"+ $(this).scrollTop() +")"。这就是实践：http://codepen.io/monstrasitix/pen/KVgmML

我认为滚动最大距离只能是300px。
您选择的颜色

导航背景取决于学校

2 个答案: