24

サイトを下にスクロールすると、上部にある黒いメニュー バーがフロート バーのように表示されます。しかし、これにはjqueryが関係していると思います。私はCSSを試しましたが、私が望むようには機能していないようです

#menucontainer {
    position:fixed;
    top:0;
    height: 250px
}

#firstElement {
    margin-top: 250px
}

メニューをどのようにしたいかのウェブサイトの基本的なアイデアは次のとおりです。

http://avathemes.com/WP/Hexic/

4

5 に答える 5

46

ID またはクラスを使用して、メニューを div またはセクションにラップします。

#yourID.fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    border-bottom: 5px solid #ffffff;
}

//STICKY NAV
$(document).ready(function () {  
  var top = $('#yourID').offset().top - parseFloat($('#yourID').css('marginTop').replace(/auto/, 100));
  $(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();

    // whether that's below the form
    if (y >= top) {
      // if so, ad the fixed class
      $('#yourID').addClass('fixed');
    } else {
      // otherwise remove it
      $('#yourID').removeClass('fixed');
    }
  });
});

これをどこから入手したか思い出せないので、挨拶はありませんが、うまくいきました。

于 2013-06-18T10:11:22.753 に答える
3

Twitter Bootstrapを使用すると役立つと思います。

ブートストラップで Navbar を見て、「Fix to top」を検索します

編集: 投稿したようなものが必要な場合は、このLeave menu bar fixed on top when scrolledのようなものと組み合わせてください。

メニューの上部オフセットが何かに等しい場合、クラス「.navbar-fixed-top」を追加します。

于 2013-06-18T10:07:07.530 に答える
2

@Kortschot が提供したソリューションを何度も試しましたが、最終的にこのソリューションは私の状況には理想的ではないことが判明しました。

@Kortschotが提供するソリューションを使用するときの私の問題は次のとおりです。

  • フローティングバーの状態が固定か非固定かで変わると、フローティングバーの幅が維持できなくなる
  • すべてのプロセスを 1 つのスクリプトで実行できるようにしたいのですが、@Kortschot が提供するソリューションは適合しません。

これは、1つのスクリプトですべての作業を実行できる私のソリューションです（1.7+ jqueryを使用）：

<script>
//浮动条设置(set the floating bar)
$( function(){
    //add new .fixed style to the <head>
    var css = '#floating_bar.fixed{position:fixed;top:1px;z-index:9999;}',
        head = document.head || document.getElementsByTagName('head')[0],
        style = document.createElement('style');
    style.type = 'text/css';
    if (style.styleSheet){ style.styleSheet.cssText = css; } 
    else { style.appendChild(document.createTextNode(css)); }
    head.appendChild(style);

    var menuOffset = $("#floating_bar")[0].offsetTop;
    var menuWidth = document.getElementById("floating_bar").offsetWidth;
    $(document).on("scroll", function(){
        var docScroll = $(document).scrollTop();
        if(docScroll >= menuOffset) { 
            $("#floating_bar").addClass("fixed");
            //dynamically change the width of floating bar according to it's width of previous state 
            $("#floating_bar.fixed").width(menuWidth);
        }else {
            $("#floating_bar").removeClass("fixed");
        }
    });
});
</script>
于 2014-02-20T06:50:20.073 に答える
0

提供された URL では、ページを数行下にスクロールすると、ブラウザーの上部に固定されたメニュー バーが表示されます。

だから私はあなたの問題を2つの質問に分けます.最初に、ページをスクロールしても消えない固定トップメニューを作成する方法. 次に、数行下にスクロールした後にメニューを上に固定する方法。

最初の質問については、css コードを変更します。

#menucontainer {
    float:top;
    position:fixed;
    top:0;
    height: 100px;
    width: 100%;
    background-color: eeee00; /* makes other content won't be seen when the page scrolling */
}

そして、2番目の質問はjsを書く必要があると思います. うーん、まだわからない。

于 2014-05-11T04:56:57.873 に答える