0

「スティッキー」ナビゲーションメニューを実装しようとしています-スクロール中にナビゲーションバーが画面の上部に到達すると固定位置に切り替わるメニュー項目です。

これは Firefox と Chrome では問題なく動作しますが、Internet Explorer (9 でテスト中) では、スクロールが特定のポイントに達し、位置が固定に切り替わると、すべての子<li>が消えます (ただし、<ul>それらが含まれている は同じままです)サイズ。

jQueryを使用してこれを実行しようとしています(これが私が持っているコードです):

<script type="text/javascript">
    $(function() {

        // grab the initial top offset of the navigation 
        var sticky_navigation_offset_top = $('#navigation').offset().top;

        // our function that decides weather the navigation bar should have "fixed" css position or not.
        var sticky_navigation = function(){
            var scroll_top = $(window).scrollTop(); // our current vertical position from the top

            // if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
            if ((scroll_top + 40) > sticky_navigation_offset_top) { 
                $('#navigation').css({ 'position': 'fixed', 'top':40, 'left':0 });
            } else {
                $('#navigation').css({ 'position': 'static', 'margin-top': 0 }); 
            }
        };

        // run our function on load
        sticky_navigation();

        // and run it again every time you scroll
        $(window).scroll(function() {
             sticky_navigation();
        }); 
    });
</script>

残念ながら、ログインが必要な安全なウェブサイトに実装されているため、これを実証することはできません. うまくいけば、私は理にかなっています。必要に応じてスクリーンショットを提供できます。

編集static： IE9でメニュー項目が正しく表示される位置にある場合は、言及する必要があります。縮んでメニューが になるfixedと、メニュー項目が消える！

別の編集：jsfiddle.netを初めて使用したので、うまくいくことを願っていますhttp://jsfiddle.net/ecm5L/

4

2 に答える 2

1

こんにちはGarethjsコードに問題はありませんが、css filterプロパティに問題がある場合は、これを置き換えるか、＃navigationcssクラスからフィルターコードを削除してみてください。

これはあなたの物です：

#navigation {
    width:100%;
    height:48px;
    background: #27b4ec;
    background: -moz-linear-gradient(top, #37c6ff 0%, #27b4ec 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#37c6ff), color-stop(100%,#27b4ec)); 
    background: -webkit-linear-gradient(top, #37c6ff 0%,#27b4ec 100%); 
    background: -o-linear-gradient(top, #37c6ff 0%,#27b4ec 100%); 
    background: -ms-linear-gradient(top, #37c6ff 0%,#27b4ec 100%); 
    background: linear-gradient(to bottom, #37c6ff 0%,#27b4ec 100%); 

  //*****REMOVE THIS******>
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#37c6ff', endColorstr='#27b4ec',GradientType=0 );
  //*****REMOVE THIS******>

    -webkit-box-shadow:0 0 10px rgba(0,0,0,0.5);
    -moz-box-shadow:0 0 10px rgba(0,0,0,0.5);
    -o-box-shadow:0 0 10px rgba(0,0,0,0.5);
    box-shadow:0 0 10px rgba(0,0,0,0.5);
    margin-bottom:10px;
    min-width:1100px;
    z-index:10000;
 }

OR PASTE IT:

#navigation {
width:100%;
height:48px;
background: #27b4ec;
background: -moz-linear-gradient(top, #37c6ff 0%, #27b4ec 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#37c6ff), color-stop(100%,#27b4ec)); 
background: -webkit-linear-gradient(top, #37c6ff 0%,#27b4ec 100%); 
background: -o-linear-gradient(top, #37c6ff 0%,#27b4ec 100%); 
background: -ms-linear-gradient(top, #37c6ff 0%,#27b4ec 100%); 
background: linear-gradient(to bottom, #37c6ff 0%,#27b4ec 100%); 
-webkit-box-shadow:0 0 10px rgba(0,0,0,0.5);
-moz-box-shadow:0 0 10px rgba(0,0,0,0.5);
-o-box-shadow:0 0 10px rgba(0,0,0,0.5);
box-shadow:0 0 10px rgba(0,0,0,0.5);
margin-bottom:10px;
min-width:1100px;
z-index:10000;
}
于 2012-11-12T11:01:32.047 に答える