-1

私が探しているコードは非常に単純です。単純に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>
4

2 に答える 2

1

dringchev が実用的な例を示しました。

あなたが説明しているものは、「スクロールスパイ」と呼ばれることがあります。たとえば、ブートストラップでは次のようになります。

http://twitter.github.io/bootstrap/javascript.html#scrollspy

jquery ウェイポイントを使用して実装することもできます

http://imakewebthings.com/jquery-waypoints/

この UX パターンの説明については、https://ux.stackexchange.com/questions/17375/what-is-the-navigation-concept-bootstrap-uses-callを参照してください

于 2013-05-05T09:48:45.740 に答える