滚动到另一个DIV时更改CSS

Question

I'm trying to get this to work with no avail. I am trying to get a menu item's CSS to change when I am scrolling past a specific DIV.

In this case, I am trying to get a menu item (#menu-item-3907) to change it's background color when I am scrolling over the div labelled #section-1.

This is the code I've tried so far:

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

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

Answer 1

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

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

Tried using HTML:

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

Answer 2

Try this.

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