1

この手法を採用して、作業中の Web サイトにフローティング/固定ナビゲーション ヘッダーを作成しようとしています。

ここでのデモ: jsfiddle.net/cc48t/

HTML:

<div id="scroller">Some controls</div>

脚本：

$(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
        $('#scroller').css('top', $(window).scrollTop());
    }
}
);

CSS:

body {
    height: 3000px;
    top: 0;
    position: relative;
}
#scroller {
    position: relative;
    top: 100px;
    width: 100%;
    background: #CCC;
    height: 100px;
}

この効果を幅の広いブラウザー (デスクトップ) でのみ機能させ、幅の狭いモバイル デバイスで定期的に表示するにはどうすればよいでしょうか。Facebook のトップ バーと同じように、ページの上部に戻る特定の幅のブレーク ポイントまでしか固定されません。

どんな助けでも大歓迎です。

ありがとう！

4

1 に答える 1

0

これを試して

// First get the window Width, in other cases you may want to get the inner but in this case with the outer we're good
var windowWidth = $(window).width();

//Then set the value for large width desktop

var desktopW = 980;

//And wrap your scroll function inside an if statement

if (windowWidth >= desktopW) {
 // your function
 } ;
于 2014-03-27T22:28:20.727 に答える