1

我希望标题的背景在滚动多个像素后淡入。使用下面的代码，我有点明白了，但不太正确！任何想法？谢谢！

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

6 回答 6

7

A combination of Miquel Las Heras and Owen 'Coves' Jones's answers, who both submitted a not completely on-topic or not complete answer.

Use background trasitions (CSS3) and jQuery simultaneously.

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;
}

Update February 3rd, 2017

browser support is very good, and the less performing jQuery solution below should not be used. Browser support.

Cross-browser solution

If you want to make it more cross-browser compatible, you can try the color plugin. But from what I've tested, it has quite a bad performance. JSFiddle

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

Don't forget the plugin itself:

//cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.js
于 2013-10-17T15:23:17.297 回答
3

首先，正如另一个答案中提到的，您需要包含 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 像素/需要 100 像素高度）。您还可以通过这种方式轻松更改要向下滚动以达到完全不透明度的高度量。

编辑所以事实证明你只是想在 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。就像我说的，只是另一种选择。

于 2013-10-17T15:09:43.800 回答
2

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

    标题{背景：透明；}
    header.scrolled { 背景：#f2f2f2; }

那么javascript应该是：

    $（函数（）{
      $（窗口）。滚动（函数（）{
        if($(document).scrollTop()>100){
          $('header').addClass('scrolled');
        }
        别的 {
          $('header').removeClass('scrolled');
        }
      });
    })
于 2013-10-17T15:13:21.673 回答
0

如果您不需要支持很多旧浏览器，您可以结合使用 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 及更低版本。

于 2013-10-17T15:12:40.573 回答
0

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

编辑：实际上，您的代码有点错误。您想将 backgroundColor 设置为某些东西。背景：1 无效 css：

所以 .css({'backgroundColor': 'red'}) 然后 .css({'backgroundColor': 'blue'})

于 2013-10-17T15:03:24.487 回答
0

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

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

CSS

.backTex {
    width:100%;
    height:500px;
    margin-top:50px;
    background-color: @myGreen;
    //Height
    transition: height 0.5s ease;
    -webkit-transition: height 0.5s ease;
    -moz-transition: height 0.5s ease;
    -o-transition: height 0.5s ease;
    -ms-transition: height 0.5s ease;
    //Background-Color
    transition: background-color 0.5s ease;
    -webkit-transition: background-color 0.5s ease;
    -moz-transition: background-color 0.5s ease;
    -o-transition: background-color 0.5s ease;
    -ms-transition: background-color 0.5s ease;
    transition: background-color 0.5s ease;
}

jQuery

$(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");
        }
    });

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

于 2016-02-24T05:12:46.340 回答