当滚动到另一个DIV上时,改变一个DIV的css

change css of one DIV when scrolled over another

本文关键字:DIV 一个 css 改变 滚动 另一个 上时      更新时间:2023-09-26

我试图让这个工作无效。我试图得到一个菜单项的CSS改变,当我滚动过去一个特定的DIV。

在这种情况下,我试图得到一个菜单项(#menu-item-3907)来改变它的背景色,当我滚动标记为#section-1的div。

这是我目前为止试过的代码:

var t = $("#section-1").offset().top;
$(document).scroll(function(){
if($(this).scrollTop() > t)
{   
    $('#menu-item-3907').css({"display":"none"});
}
});
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>

试试这个

    <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/