2016-04-25 8 views
0

私はこのウェブサイトで助けています:www.noyoco.com。 私は最近、ユーザーがスクロールするときにナビゲーションバーを上に固定するスクリプトを追加しました。固定Navbarがアンロールメニューを破った

<script type="text/javascript"> 
    $(document).ready(function() { 
    var s = $("#main-nav"); 
    var pos = s.position();  
    $(window).scroll(function() { 
     var windowpos = $(window).scrollTop(); 
     if (windowpos >= pos.top) { 
      s.addClass("stick"); 
     } else { 
      s.removeClass("stick"); 
     } 
    }); 
}); 
</script> 

しかし、なぜアンロールメニューが壊れているのかわかりません。

(あなたがスクロールを持っている場合)、スクリプトが上にある場合、(スクリプトがオフになっている)上に正しくときの作業壊れ

誰かがそれを助けることはできますか? ありがとう!

答えて

1

2番目のメニューがnavコンテナの絶対位置にないためです。メインメニューで切り替えると、display: block;display: none;にしかありません。サブメニューのメニューへ

.multi-level-nav { 
    position: relative; 
} 

と絶対位置:

.tier-2 { 
    position: absolute; 
    left: 0; 
    right: 0; 
    z-index: 2; /* to be above the slideshow */ 
} 

役に立てば幸い

それを修正するには、このような親コンテナの相対位置を追加することができます。

EDIT

それは、このため、セレクタの、あなたはそれがfixedになったときに理由は構造の変化、それを変更する必要もあります:

.nav-row ul ul { 
    display: none; 
} 
+0

ねえ!助けてくれてありがとう! 私のスタイルシートにそれらを追加し、そのようなスクリプトを再構築します: しかし、動作しません。 私は間違っていましたか? –

+0

サブメニューのクラスを使うほうが良いかもしれません。構造を変更すると他のものをターゲットにできる '.nav-row ul ul'ではなく、正しいものをターゲットにすることができます** –

+0

Heyヴィンセント、助けてくれてありがとう。 実際には、ソリューションはかなりシンプルだったので、スクリプト内に別のJqueryセレクタを使用するだけでした。var s = $( "#main-nav .multi-level-nav") これは正しく動作します! –

関連する問題