到达div（滚动）时更改ul样式

我想在滚动时更改ul样式并使用jQuery到达div，解释下来。

CSS：

#menu { background-color:#ccc; position:fixed; width:100%; } .menutext { padding:25 40 30 !important; display:inline-block; } .menutext2 { padding:25 40 0 !important; display:inline-block; color:red; } .alldivs { width:300px; height:200px; background-color:a9a9a9; } 

HTML代码：

 
 
Change the style of me to .mebutext2 on arriving to DIV1
 
Change the style of me to .mebutext2 on arriving to DIV2
 
Change the style of me to .mebutext2 on arriving to DIV3
 
 


 
DIV1
 



 
DIV2
 



 
DIV3
 



 

我想在滚动时将类“menutext”更改为class“menutext2”并到达div的顶部（第一次ul的类从menutext1更改为menutext2，到达具有id DIV1的div，第二次ul的类更改从menytext1到menutext2到达具有id DIV2的div并且第一个ul的类返回menutext1 AS IT WAS等等。

Answer 1

这应该只使用jQuery做你要问的事情：

 $(document).scroll(function(e) { var detectrange = 50; //how close to the top of the screen does it need to get var scrolltop = $(window).scrollTop() + detectrange; $('.alldivs').each(function(i, el){ if (scrolltop > $(el).offset().top) { $('.'+el.id).removeClass('menutext').addClass('menutext2'); } }); }); 

请注意，要使其工作，我必须在div1 ， div2 ， div3等上应用alldivs类，并提供与其ID对应的菜单项类。

这个jsFiddle中的演示： http ： //jsfiddle.net/ss7YF/

编辑如果你只想要最近的一个突出显示（对于我猜的固定菜单？）使用：

 $(document).scroll(function(e) { var scrolltop = $(window).scrollTop(); var mindist = 1000; var closest = ''; $('.alldivs').each(function(i, el){ var thisdist = Math.abs(scrolltop - $(el).offset().top); if (thisdist < mindist) { closest = el.id; mindist = thisdist; } }); if (closest != '') { $('.menutext2').toggleClass('menutext menutext2'); $('.'+closest).toggleClass('menutext menutext2'); } }); 

jsFiddle： http ： //jsfiddle.net/ss7YF/1/

Answer 2

您可以使用YAHOO YUI框架编写一个类似于以下内容的javascript：

 var Event = YAHOO.util.Event; Event.on(window, 'scroll', function() { if (document.getElementById("DIV1").scrollTop == 0) { document.getElementById("DIV1").className = "menutext2"; } } 

Answer 3

是的，你需要jQuery，但我不明白：当滚动条看到div1或点击div1时你必须应用menutext2类吗？

设置事件（单击或滚动并应用）

 $('.menu').removeClass('menutext').addClass('menutext2'); 

Answer 4

尝试像这样的jsFiddle

 $(document).scroll(function () { var y = $(this).scrollTop(); if (y > 275) { $(".menutext").addClass( "menutext2"); } else { $(".menutext").removeClass( "menutext2"); } 

}）;

在你向下滚动.menutext2后，我有这个设置添加.menutext2 ，接近div2的顶部，从这里想出它应该不难。

Answer 5

是的，用jsFiddle完成它尝试这个

用.addClass和.removeClass替换.css。 我使用DIV1-3的父div，因为你的样式是父亲的高度。

 $(window).scroll(function(){ var top = $(window).scrollTop() + $(window).height(); var offsetDiv1 = $("#DIV1").offset().top; var offsetDiv2 = $("#DIV2").offset().top; var offsetDiv3 = $("#DIV3").offset().top; if(top >= offsetDiv1 && top <= $("#DIV1").parent("div").height() + offsetDiv1){ // alert(top); $("#menu").css("background", "black"); }else if(top >= offsetDiv2 && top <= $("#DIV2").parent("div").height() + offsetDiv2){ // alert(top); $("#menu").css("background", "blue"); }else if(top >= offsetDiv3 && top <= $("#DIV3").parent("div").height() + offsetDiv3){ //alert(top); $("#menu").css("background", "yellow"); }else{ $("#menu").css("background", "gray"); } 

}）;

Answer 6

看起来你想要我在我的页面上实现的相同。

请查看http://s-yadav.github.com/contextMenu.html上的菜单部分

根据您的要求试试这个。

HTML

 
 
Change the style of me to .mebutext2 on arriving to DIV1
 
Change the style of me to .mebutext2 on arriving to DIV2
 
Change the style of me to .mebutext2 on arriving to DIV3
 
 


 
DIV1
 



 
DIV2
 



 
DIV3 

JS

 $(function(){ var menu=$('#menu'), menuText=menu.find('.menuText'), DIV1=$('#DIV1'), DIV2=$('#DIV2'), DIV3=$('#DIV3'), DIV1Top=DIV1.offset().top, DIV2Top=DIV2.offset().top, DIV3Top=DIV3.offset().top; $(window).scroll(function(e) { var win=$(this), scrollTop=$(this).scrollTop(); //to make nav menu selected according to scroll var start=scrollTop; menuText.filter('.menutext2').removeClass('menutext2').addClass('menutext'); if(start>DIV3Top){ menuText.filter('[linkId="DIV3"]').removeClass('menutext').addClass('menutext2'); } else if (start>DIV2Top){ menuText.filter('[linkId="DIV2"]').removeClass('menutext').addClass('menutext2'); } else if(start>DIV1Top){ menuText.filter('[linkId="DIV1"]').removeClass('menutext').addClass('menutext2'); } }); }); 

更新：

通用方法。

 $(function () { var menu = $('#menu'), menuText = menu.find('.menuText'), contentDiv = $('.contentDiv'); $(window).scroll(function (e) { var win = $(this), scrollTop = $(this).scrollTop(); //to make nav menu selected according to scroll var start = scrollTop; menuText.filter('.menutext2').removeClass('menutext2').addClass('menutext'); for (var i = 0; i < contentDiv.length; i++) { var elm = $(contentDiv[i]), id = contentDiv[i].id, top = elm.offset().top, nextTop = elm.next().offset().top || 1000000000; if (start > top && start < nextTop) { menuText.filter('[linkId="' + id + '"]').removeClass('menutext').addClass('menutext2'); break; } } }); 

第二种方法更短，更通用但效率低于第一种方法，因为每个时间循环都会进入滚动事件。 和滚动事件非常频繁地执行。

如果'.contentDiv'的数量较少，我宁愿按照第一种方法，否则按照第二种方法。