jquery背景颜色在滚动上淡入 [英] jquery background color fade in on scroll

问题描述

我想让标题的背景在一些像素滚动后淡入。有了下面的代码，我得到它，但不是很多权利！任何想法？感谢！

  $（function（）{
 $（window）.scroll（function（）{
 $（document）.scrollTop（）> 100？$（'header'）。css（{
background：1 
}）fadeIn（）：$（'header'）。 css（{
background：0 
}）。fadeOut（）; 
}）; 
}）
  

解决方案

Miquel Las Heras和Owen'Coves'Jones的答案，他们都提交了一个不完全的主题完全回答。

< a href =http://jsfiddle.net/BramVanroy/gcSe8/ =nofollow noreferrer> 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解决方案。 浏览器支持

跨浏览器解决方案

如果您想使其更具跨浏览器兼容性，可以尝试颜色插件。但是从我测试的，它有相当不良的性能。
JSFiddle

  $（document）.ready（function（）{
 $（window）.scroll 
 if（$（document）.scrollTop（）> 100）{
 $（header）。animate（{
 backgroundColor：red
} ; 
} else {
 $（header）。animate（{
 backgroundColor：blue
}，200）; 
} 
} ）; 
}）; 
  

不要忘记插件本身：

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

I want the background of the header to fade in after a number of pixel scrolled. With the code below i kinda get it but not much right! Any idea? thanks!

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

解决方案

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

这篇关于jquery背景颜色在滚动上淡入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！