Javascript 图像占据整个页面，而不是横幅分隔符

我试图创建一个横幅，当你滚动时会模糊，但当我尝试时，我的图像会填满整个页面，它位于所有元素后面，但仍然会填满页面。我想把它放在顶部的隔板上作为横幅

HTML/CSS

---

你可以试试类似的东西

$(window).scroll(function() {
            var s = $(window).scrollTop(),
            if (s >= 100){
              $('.banner').css({'bottom':'auto', 'height' : '250px'});
            }else{
              $('.banner').css({'bottom':'0', 'height' : 'auto'});
            }
            opacityVal = (s / 150.0);
            $('.banner-blurred').css('opacity', opacityVal);
            });

---

据我所知，我的图像填充了整个页面，它位于所有元素的后面，但它仍然填充了整个页面。我想把它放在顶部的隔板上作为横幅。您需要将.banner类div固定在与id=banner容器相同的位置。。然后你做。横幅位置固定，底部：0。。。因此，您需要将其更改为“自动”，并将height:250px添加为您的id=banner容器。。我在卷轴大于100px后编写了代码，它将改变。banner css

你能解释一下你的更正吗？为什么OP的代码不涉及与大小相关的css，却不起作用？

$(window).scroll(function() {
    var s = $(window).scrollTop(),
    opacityVal = (s / 150.0);
    $('.banner-blurred').css('opacity', opacityVal);
});

$(window).scroll(function() {
            var s = $(window).scrollTop(),
            if (s >= 100){
              $('.banner').css({'bottom':'auto', 'height' : '250px'});
            }else{
              $('.banner').css({'bottom':'0', 'height' : 'auto'});
            }
            opacityVal = (s / 150.0);
            $('.banner-blurred').css('opacity', opacityVal);
            });