6

まず、これがあまりにもオープンエンドな質問である場合はお詫び申し上げます。

Web ページのヘッダーを静的にすることを認識しているため、常にビューポートの上部に表示され、下にスクロールするとコンテンツがその下を通過します。これは css だけで実現できます。

ヘッダーをページからスクロールさせて、水平のメニューバーを上部に固定したままにする方法を知りたいと思っていました。http://www.forexfactory.comはこの完璧な例です。

onHeaderComplete.execute()ヘッダーがスクロールオフしたときに追加のcssスタイルをナビゲーションバーに適用すると思われるJavaScript関数を呼び出していることがわかりますが、それがどのように機能するかはわかりません。私の JavaScript スキルは比較的限られているため、基本的な説明を歓迎します。

4

3 に答える 3

13

同様の質問に答えただけです。この質問をチェック

$(function(){
        // Check the initial Poistion of the Sticky Header
        var stickyHeaderTop = $('#stickyheader').offset().top;

        $(window).scroll(function(){
                if( $(window).scrollTop() > stickyHeaderTop ) {
                        $('#stickyheader').css({position: 'fixed', top: '0px'});
                        $('#stickyalias').css('display', 'block');
                } else {
                        $('#stickyheader').css({position: 'static', top: '0px'});
                        $('#stickyalias').css('display', 'none');
                }
        });
  });

デモ

于 2013-01-24T10:27:27.957 に答える
6

次のように書くことができます。

$(window).scroll(function() {
    if ($(this).scrollTop() > 50) {
         $('div').addClass('fix');
    } else {
         $('div').removeClass('fix');
    }
});

CSS

.fix{
    position:fixed;
    top:0;
    left:0;
    right:0;
    margin:0;
}

これをチェックしてくださいhttp://jsfiddle.net/a42qB/

于 2013-01-24T10:40:02.223 に答える
2

メニューを 2 回作成することで、純粋な CSS を使用することもできます。これは理想的ではありませんが、メニューが一番上に表示されると、メニューに別のデザインを使用する機会が与えられ、CSS 以外には何もなく、jquery はありません。

<div id="hiddenmenu">
 THIS IS MY HIDDEN MENU
</div>
<div id="header">
 Here is my header with a lot of text and my main menu
</div>
<div id="body">
 MY BODY
</div>

そして、次の CSS を用意します。

#hiddenmenu {
position: fixed;
top: 0;
z-index:1;
 }
#header {
top: 0;
position:absolute;
z-index:2;
 }
#body {
padding-top: 80px;
position:absolute;
z-index: auto;
 }

ここにフィドルがあります: https://jsfiddle.net/brghtk4z/1/

于 2016-07-28T11:52:43.343 に答える