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

【问题标题】：How to change color of text when entering fixed div using jQuery使用jQuery输入固定div时如何更改文本颜色
【发布时间】：2014-02-11 02:40:52
【问题描述】：

我有一个背景色固定在浏览器中的 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;}

【问题讨论】：

这将非常困难。您的 <div class="section"> 高 300 像素...所以即使您对其进行编码以检测该部分何时进入/离开覆盖区域；当您更改它的 css color:#fff 时，它会影响整个 300px div - 甚至那些没有进入红色框覆盖层后面的部分。不可能只有css样式影响div的部分
我明白你的意思。有没有另一种方法可以使用 jQuery 来影响屏幕特定部分内的所有内容？
不，不是。然后，您会遇到单行文本何时位于叠加层的一半和位于叠加层的一半的问题。我的单行不能同时是#000 和#fff。
我明白了。如果所有文本都转换为 SVG 图像，是否有可能？

标签： javascript jquery

【解决方案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");
        }
    });

});

【讨论】：

是的，它很笨重，但也许我可以做这样的事情。
@zgood 当然，我应该检查一下！我更新了小提琴以检查顶部或底部是否在红框内，或者顶部或底部都在红框之外。现在似乎可以正常工作。当然，第 3 部分在退出时永远不会变回黑色，因为元素的高度大于文本并且仍在红色框内。

【解决方案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/
这是一个示例代码，您可以自定义它。

【讨论】：

我想他想改变<div class="section">的css文本颜色，因为它在红色框覆盖下滚动
是的！因为这样做我浪费了很多时间我现在正在编程而且我没有足够的时间去做......