Question

我有一个div，其背景颜色已在浏览器中修复。

滚动浏览网站时，我希望文本颜色在遇到此叠加层时从黑色变为白色，然后在离开时再次变回黑色。这在css中实际上是不可能的，所以如何在jQuery中设置它？

我正在使用ScrollTo插件（http://flesler.blogspot.com/2007/10/jqueryscrollto.html）进行滚动。

小提琴（css和html）： http://jsfiddle.net/L76NP/

HTML：

<body>
    <div id="wrapper">
    <div class="section">Section 1</div>
    <div class="section">Section 2</div>
    <div class="section">Section 3</div>
    <div class="section">Section 4</div>
    </div>

    <div id="overlay"></div></body>

的CSS：

body {color: #000000}

#wrapper { margin-left: auto;
    margin-right: auto}

.section {
    height: 300px;
    width: 400px;
    margin: 0 auto;
    padding: 15px;}

#redbox {
    background-color: #FF0000;
    position: fixed;
    top:100px;
    bottom: 200px;
    left: 0;
    right: 0;
    z-index: -100;}

Answer 1

试试这个：

http://jsfiddle.net/ALcm6/3/

基本上检查该部分是否适合该框，如果是，则更改文本颜色。您可以根据您的特定需求进行更改。

$(window).scroll(function () {
    var redbox = $("#redbox");
    var redBoxTop = redbox.position().top;
    var redBoxBottom = redBoxTop + redbox.outerHeight();
    $(".section").each(function () {
        var section = $(this);
        var sectionTop = section.position().top - $(window).scrollTop() + 15;
        var sectionBottom = section.position().top - $(window).scrollTop() + section.height();
        if ((sectionTop >= redBoxTop && sectionTop <= redBoxBottom) || (sectionTop <= redBoxTop && sectionBottom >= redBoxBottom) || (sectionBottom >= redBoxTop && sectionBottom <= redBoxBottom)) {
            section.css("color", "white");
        } else {
            section.css("color", "black");
        }
    });

});

Answer 2

$('#redbox').css('background-color','rgb(255,255,255)');//it's css controller

这是滚动事件：

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
     $('#redbox').css('background-color','rgb(255,255,255)'); 
   } else {
     $('#redbox').css('background-color','rgb(0,0,0)');
   }
});

http://jsfiddle.net/LQ9QP/
这是一个示例代码，您可以自定义它。

使用jQuery输入固定div时如何更改文本颜色

2 个答案: