私が探しているコードは非常に単純です。単純にdivとメニューがあり、スクロールして最初のdivに到達すると、メニューの最初のulのスタイルが自動的に変更され、2番目のdivにスクロールすると2番目のURLスタイルを別のスタイルに変更し、そのように...質問に対する回答を得て、コードを持っていますが、非常に背が高く、取得したすべてのdivのコードが含まれているため、好きではありません. 私が知っているように、jQuery で全体の div の仕事をする 1 つの短いコードを見つけることができます。私が欲しいのは、このコードとまったく同じです( http://jsfiddle.net/を介して動作させることはできません.jqueryをロードする方法を誰かが知っている場合は、ロードしてURLを教えてください)
<html>
<style>
#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;
}
</style>
<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><br><br><br><br>
<div class="alldivs"><div class="contentDiv" id="DIV1">DIV1</div></div>
<br><br><br><br><br><br><br><br>
<div class="alldivs"><div class="contentDiv" id="DIV2">DIV2</div></div>
<br><br><br><br><br><br><br><br>
<div class="alldivs"><div class="contentDiv" id="DIV3">DIV3</div></div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(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');
}
});
});
</script>