我想换一个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代码：
<div id="menu">
<div class="menutext">Change the style of me to .mebutext2 on arriving to DIV1</div>
<div class="menutext">Change the style of me to .mebutext2 on arriving to DIV2</div>
<div class="menutext">Change the style of me to .mebutext2 on arriving to DIV3</div>
</div>
<br><br><br>
<div class="alldivs"><div id="DIV1">DIV1</div></div>
<br><br><br><br>
<div class="alldivs"><div id="DIV2">DIV2</div></div>
<br><br><br><br>
<div class="alldivs"><div id="DIV3">DIV3</div></div>
<br><br><br><br>
我想改变与类“menutext”上课“menutext2”在div上滚动和抵达的div（从menutext1第一UL的类变化的顶部menutext2在到达与ID DIV1，第二UL的类变化的DIV从menytext1到menutext2在到达与ID DIV2和第一UL的类回归div来menutext1，因为它是等。
这应该做你问什么，只使用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');
}
});
});
需要注意的是使它工作，我不得不套用alldivs上你的类div1 ， div2 ， div3等，并给出相应于它们的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/
您可以使用雅虎YUI框架编写沿着这样的线一个javascript：
var Event = YAHOO.util.Event;
Event.on(window, 'scroll', function() {
if (document.getElementById("DIV1").scrollTop == 0) {
document.getElementById("DIV1").className = "menutext2";
}
}
是的，你需要的jQuery，但我不明白：你必须申请menutext2上课的时候滚动条查看DIV1或当您单击DIV1？
设置的事件（点击或滚动和应用）
$('.menu').removeClass('menutext').addClass('menutext2');
尝试这样的jsfiddle
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 275) {
$(".menutext").addClass(
"menutext2");
} else {
$(".menutext").removeClass(
"menutext2");
}
}）;
我有这个设置添加.menutext2你滚动下来后275px，DIV2的近似顶部，它不应该是很难从这里找到答案。
是啊，用的jsfiddle做了尝试这个
与.addClass和.removeClass替换的CSS。 我用DIV1-3的父格，因为你是风格上它的父的高度。
$(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");
}
}）;
看来你要同我在我的网页上实现。
对菜单部分外观上http://s-yadav.github.com/contextMenu.html
按照您的要求试试这个。
HTML
<div id="menu">
<div class="menutext" linkId="DIV1">Change the style of me to .mebutext2 on arriving to DIV1</div>
<div class="menutext" linkId="DIV2">Change the style of me to .mebutext2 on arriving to DIV2</div>
<div class="menutext" linkId="DIV3">Change the style of me to .mebutext2 on arriving to DIV3</div>
</div>
<br><br><br>
<div class="alldivs"><div class="contentDiv" id="DIV1">DIV1</div></div>
<br><br><br><br>
<div class="alldivs"><div class="contentDiv" id="DIV2">DIV2</div></div>
<br><br><br><br>
<div class="alldivs"><div class="contentDiv" id="DIV3">DIV3</div></div>
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”的数量少，我会更喜欢跟从第一种方法遵循别的第二种方法。
