jQuery：ブラウザの幅に基づいてオフセットを実行するelseステートメントを設定する

Question

視差のある1ページのサイトを終了して固定ナビを取得しているため、ページのさまざまなdiv /上に切らないでください。問題は、ブラウザの幅が違う場合にこれを実行していることです。固定ナビはデスクトップ上と同じようにモバイルの高さの約半分になるためです。

このjQueryを試してみると、ifアクションではなくelseアクションが実行されているようです。オフセットはモバイルではあまりにも大きいです。ここで私が現在使用してんだよ：

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
    jQuery('.main-navigation a[href^="http://example.com/#"]').click(function() { 
     if (jQuery(window).width() < 677) { 
     jQuery.scrollTo(this.hash, 1000, { easing:'swing', offset:-20 }); 
     } else { 
     jQuery.scrollTo(this.hash, 1000, { easing:'swing', offset:-141 }); 
     } 
    }); 
    }); 
</script> 

Answer 1

私は、これは、より応答ソリューションを提供すると思います。このJSfiddleで

$(document).ready(function() { 
    $.resizeContentHeight = function(){ 
     $('#main-content').css("margin-top", $(".header-fixed").height()); 
    } 
$(window).load(function() { 
    $.resizeContentHeight(); 
}); 
$(window).resize(function() { 
    $.resizeContentHeight(); 
}); 
}); 

私は.header-fixedの高さを計算し、へmargin-topとしてこれを適用しますその下のコンテンツ（#main-content）。私はこれが正しいことを達成しようとしていると思いますか？私はこれをテストし、複数のブラウザで動作するように修正しました。視差のあるサイトでこれが関連しているかどうかは、作業しているHTMLの例を示すことができれば助かります。これは、ユーザーがデバイスの向きを変更した場合にも調整されます。

これは、アンカーリンクへのヘッダーの高さを追加または削除するためにも適用できます。