3

ドキュメントヘッダーの位置を操作するために使用している単純なjQuery関数（以下で詳しく説明します）があり、ブラウザーウィンドウがあるサイズ？この場合、ブラウザのウィンドウ幅が1024pxを超える場合にのみ、「stickyHeaderTop」関数を実行したいと思います。これは可能ですか？

<script type="text/javascript">
    $(function(){
    var stickyHeaderTop = $('header').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop ) {
                    $('header').css({position: 'fixed', top: '0px'});
            } else {
                    $('header').css({position: 'relative', top: '30px'});
            }
    });
});
</script>
4

2 に答える 2

9

screen-Objectの、、、heightおよび属性をwidth使用できます。availHeightavailWidth

たとえば、800px未満の画面でコードを実行する場合は、次のようにします。

if (screen.width < 800){
// do stuff
}

これはクロスブラウザの落とし穴（およびstumbleuponツールバーのようなsthがある場合の問題）がある領域であることに注意してください。そのため、代わりにjQuery（すでに使用している）を使用してクライアントのウィンドウサイズを検出します。

if ($(window).width() < 800){
// do stuff
}

jQuery部分の純粋なJSとjquery.comに関するMDNでのさらなる読み物

于 2012-08-19T10:10:16.633 に答える
0

このようなものをscrollイベントコールバックに配置できます。

If ($(window).width() < 1024) {
    return;
}
于 2012-08-19T10:09:42.400 に答える