滚动到另一个 DIV 时更改一个 DIV 的 CSS答案

【问题标题】：change css of one DIV when scrolled over another滚动到另一个 DIV 时更改一个 DIV 的 CSS
【发布时间】：2014-06-18 04:36:54
【问题描述】：

我试图让这个工作无济于事。我试图在滚动经过特定 DIV 时更改菜单项的 CSS。

在这种情况下，当我滚动标记为 #section-1 的 div 时，我试图获取一个菜单项 (#menu-item-3907) 以更改其背景颜色。

这是我目前尝试过的代码：

var t = $("#section-1").offset().top;

$(document).scroll(function(){
if($(this).scrollTop() > t)
{   
    $('#menu-item-3907').css({"display":"none"});
}
});

【问题讨论】：

我不认为scroll() 做你认为它做的事。也许你想要on('hover'...。

标签： javascript css function scroll offset

【解决方案1】：

var t = $("#section-1").scrollTop();

$(document).scroll(function(){
    if($(this).scrollTop() > t){
        $('#menu-item-3907').css({"background":"yellow"});
    }
});

尝试使用 HTML：

<div id="section-1">Section 1</div>
<div id="menu-item-3907" style="margin-top:1500px">Menu</div>

【讨论】：

嘿，谢谢。问题是背景会立即发生变化，而不是在滚动正确的 div 时发生变化。现场示例：dev.themarketcreative.com

【解决方案2】：

试试这个。

    <script>
$(window).scroll(function() {

    var scroll_pos = window.pageYOffset;



    if(scroll_pos>=300) {
       $("#menu-item-3907").css("background-color","#B44DFE");
    }
    else
    {
        $("#menu-item-3907").css("background-color","#FFF");
    }
}); 

    </script>
<div id="#section-1" style="color:pink;height:300px;border:1px solid">
hi

  </div>  

<div id="menu-item-3907"  style="color:blue;height:300px;border:1px solid">

hi
</div>

http://jsfiddle.net/LnWhJ/1/

【讨论】：

这是很好的伙伴。滚动过去时有什么方法可以恢复背景变化？
实际上，看着它，它并没有按我的需要工作。也许这是我这边的一个编码错误，但是如果您稍微向下滚动，即使您不在 #section-1 所在的页面上，链接也会变成紫色。
无需道歉！它似乎仍然在做同样的事情，不知道为什么：dev.themarketcreative.com
i'hv check dev.themarketcreative.com/....there 顶部菜单中主页的颜色正在改变..没有别的..您可以设置 div 的高度..我设置为 300
嘿，更清楚一点，菜单中的 Home 链接是我正在寻找它以在将鼠标悬停在 div 上时更改颜色的链接，它是但一旦我不会取消它已经滚动过去的 div。我尝试将 div 设置为 300px，但没有成功。