2

ユーザーが下にスクロールすると、ナビゲーションの背景の一部の色をコンテンツの色に合わせて変更したいと考えています。

この正確な例は、blobfolio.comで入手できます。

私の試み：

window.onscroll = function () {
    var background = document.body.scrollTop < 200 ? '#fff' : 'red',
        elems = document.getElementsByTagName('nav');

    for (var i=0; i<elems.length; i++) {
        elems[i].style.background = background;
    }
}

forループも含まれると思います。このJSFiddleで試してみましたが、背景全体が変わります。これは私が望んでいるものではありません。

私は本当にかなり行き詰まっています。どんな助けでも大歓迎です!

また、純粋な JavaScript でこれを実行しようとしています - フレームワークはありません。

4

3 に答える 3

1

このようなものを試すことができます

window.onscroll = function () {
    var top=0;
    var top=document.body.scrollTop;
 if(top < 200){
     $("a[href='#home']").parent().css("background-color","Green");
         $("a[href='#home']").parent().siblings().css("background-color","");
       }

       if((top >= 200) && (top < 800)){
         $("a[href='#Services']").parent().css("background-color","red");
         $("a[href='#Services']").parent().siblings().css("background-color","");
       }    
}

JS フィドルのデモ

Jqueryを使用したくない場合は申し訳ありません。ここでは、それを達成する方法についてのアイデアを提供しているだけです。

于 2013-05-31T16:26:35.437 に答える