Question

我希望在滚动一些像素后，标题的背景会淡入。有了下面的代码，我有点得到它，但不是很正确！任何的想法？谢谢！

$(function () {
    $(window).scroll(function () {
        $(document).scrollTop() > 100 ? $('header').css({
            "background": 1
        }).fadeIn() : $('header').css({
            "background": 0
        }).fadeOut();
    });
})

Answer 1

Miquel Las Heras和Owen'Coves'琼斯的答案的组合，他们都提交了一个不完整的主题或不完整的答案。

同时使用后台trasition（CSS3）和jQuery。

的 JSFiddle

<强>的jQuery

$(document).ready(function () { $(window).scroll(function () { if ($(document).scrollTop() > 100) { $("header").addClass("scrolled"); } else { $("header").removeClass("scrolled"); } }); });

<强> CSS

header { background-color:blue; -webkit-transition: background-color 700ms linear; -moz-transition: background-color 700ms linear; -o-transition: background-color 700ms linear; -ms-transition: background-color 700ms linear; transition: background-color 700ms linear; } header.scrolled { background-color: red; }

2017年2月3日更新

浏览器支持非常好，不应该使用性能较差的jQuery解决方案。 Browser support.

跨浏览器解决方案

如果您想使其更兼容跨浏览器，您可以尝试使用颜色插件。但是根据我的测试，它的性能相当糟糕。 的 JSFiddle

$(document).ready(function () { $(window).scroll(function () { if ($(document).scrollTop() > 100) { $("header").animate({ backgroundColor: "red" }, 200); } else { $("header").animate({ backgroundColor: "blue" }, 200); } }); });

不要忘记插件本身：

//cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.js

Answer 2

首先，正如在另一个答案中提到的，您需要包含jQuery UI或用于颜色动画的jQuery Color插件。

第二，这只是它的翼，但是给这个旧的大学尝试：

$(function(){
    $(window).scroll(function(){
        var $scrollPercent = ($(document).scrollTop() / 100);

        if($scrollPercent <= 1){
            $('header').css({backgroundColor:'rgba(0,0,0,'+$scrollPercent+')'});
        }
    });
});

根据您滚动页面的数量，这应该会逐渐淡出。这意味着如果向下滚动50像素，您的背景颜色不透明度将设置为50％（50 px向下/ 100 px高度需要）。您也可以通过这种方式轻松更改要向下滚动以达到完全不透明度的高度。

编辑所以事实证明你只想在100px之后淡出颜色......而不是逐渐淡入。没问题。

其他人已经指出了很好的（并且更好）CSS3方式来做到这一点......创建一个过渡效果，并在滚动上添加一个类。我不会偷他们的雷声，但我会提供一种可以回溯到古代浏览器的替代方案。

在标题顶部添加额外的HTML行：

<div class="header">
    <div class="headerBackground"></div>
    <!-- other header stuffs -->
</div>

然后设置它的CSS：

.header {
    position:relative;
}

.headerBackground {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgb(0,0,0);
    opacity:0;
    filter:alpha(opacity=0); // for IE8 and below
}

然后使用以下jQuery：

$(function(){
    $(window).scroll(function(){
        var $bg = $('.headerBackground');

        if($(document).scrollTop() >= 100){
            $bg.animate({opacity:1},500); // or whatever speed you want
        } else {
            $bg.animate({opacity:0},500);
        }
    });
});

这还有一个额外的好处，就是不需要另一个库（jQuery UI / jQuery Color插件）。当然，缺点是非语义HTML。就像我说的那样，只是另一种选择。

Answer 3

我更喜欢为这类问题创建2个css类。一个用于何时滚动窗口，一个用于何时不滚动：


    header { background: transparent; }
    header.scrolled { background: #f2f2f2; }

那么javascript应该是：


    $(function () {
      $(window).scroll(function () {
        if($(document).scrollTop()>100){
          $('header').addClass('scrolled');
        }
        else {
          $('header').removeClass('scrolled');
        }
      });
    })

Answer 4

您的代码是正确的，但jQuery本身不支持颜色动画。你需要一个插件或jquery-ui：http://jqueryui.com/animate/

编辑：实际上，您的代码有点不对劲。你想将backgroundColor设置为某种东西。 background：1是无效的css：

所以.css（{'backgroundColor'：'red'}）然后.css（{'backgroundColor'：'blue'}）

Answer 5

如果您不需要支持许多旧版浏览器，可以使用jQuery和css3过渡的组合为背景颜色设置动画：

采用HTML：

<div id="myBox">Stuff here</div>

和javascript：

var myBox = $('#myBox');

myBox.on('click', function (el) {

    myBox.css('background-color', 'red');

}

然后单击元素#myBox将其背景颜色更改为红色。瞬间，没有褪色。

如果您还放置了css代码：

#myBox {
    -webkit-transition: background-color 300ms ease-in-out;
    -moz-transition: background-color 300ms ease-in-out;
    transition: background-color 300ms ease-in-out;
}

然后，对背景的任何颜色变化都会在300毫秒内消失。适用于所有最新版本的浏览器，但不适用于IE 9及更低版本。

Answer 6

我最终使用的解决方案如下：

我创建了一个基于滚动位置淡入淡出的部分。

CSS

$(document).scroll(function() {
        var positionScroll = $(this).scrollTop();

        if(positionScroll <= 499) {
            $(".backTex").css("background-color", "#fff");    
        } else if (positionScroll > 500 && positionScroll < 1100) {
            $(".backTex").css("background-color", "#2ecc71");
        } else {
            $(".backTex").css("background-color", "#fff");
        }
    });

的jQuery

href

就兼容性而言，我还没有注意到浏览器之间存在任何问题。如果您遇到任何问题，请回复我的帖子。谢谢！

jquery背景颜色淡入淡出滚动

6 个答案:

2017年2月3日更新

跨浏览器解决方案

CSS

的jQuery