固定のナビゲーションの下に移動するためのjavascriptによるボディパッディングの設定

私は多くの検索を行っていますが、動作するものは何も見つかりません。私はWPテーマの上でBootstrapの固定ナビゲーションバーを使って作業しています。すべてがうまくいっていましたが、メニューアイテムを追加し始めたときに、メニューの高さが拡大してコンテンツをカバーし始めました。これはテーマなので、誰かがナビゲーションに多くのリンクを張ることができるので、ボディパッディングをnavbarの高さに設定する方法が必要です。ここで固定のナビゲーションの下に移動するためのjavascriptによるボディパッディングの設定

はHTMLです：

<body class="page-template page-template-page-full-width page-template-page-full-width-php page page-id-42"> 

    <header role="banner"> 

     <div id="inner-header" class="clearfix"> 

      <div class="navbar navbar-fixed-top"> 
       <div class="navbar-inner"> 
        <div class="container-fluid nav-container"> 
         <nav role="navigation"> 
          <div class="span3"> 
          <a class="brand" id="logo" title="Just another WordPress site" href="http://corpuschristi2:8888/corpuschristi"> 
                     <img src="http://corpuschristi2:8888/corpuschristi/wp-content/uploads/2017/07/cc_logo_white.png" alt="Just another WordPress site"> 
                      <!--<img src="" alt="">--> 
            </a> 
                  </div> 
                 <div class="span9"> 
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
           <span class="icon-bar"></span> 
           <span class="icon-bar"></span> 
           <span class="icon-bar"></span> 
          </a> 

          <div class="nav-collapse"> 
           <ul id="menu-main-menu" class="nav"><li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://corpuschristi2:8888/corpuschristi/recent-news/">Recent News</a></li><li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-42 current_page_item active"><a href="http://corpuschristi2:8888/corpuschristi/test-page/">Full Width Page w/fi</a></li><li id="menu-item-119" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://corpuschristi2:8888/corpuschristi/full-width-page-wo-fi/">Full Width Page w/o FI</a></li><li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://corpuschristi2:8888/corpuschristi/sample-page/">Left Side Bar Page w/FI</a></li><li id="menu-item-118" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://corpuschristi2:8888/corpuschristi/left-sidebar-wo-fi/">Left sidebar w/o FI</a></li><li id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://corpuschristi2:8888/corpuschristi/regular-page/">Regular Page w/ FI</a></li><li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://corpuschristi2:8888/corpuschristi/regular-page-wo-fi/">Regular Page w/o FI</a></li></ul>        </div> 
                 </div> 
         </nav> 


        </div> <!-- end .nav-container --> 
       </div> <!-- end .navbar-inner --> 
      </div> <!-- end .navbar --> 

     </div> <!-- end #inner-header --> 

    </header> <!-- end header --> 

    <div class="container-fluid"> 
          <div style="position: relative"> 
    <h1 class="title-over-image">Full Width Page w/fi</h1>...

任意の助けいただければ幸いです。

出典

2017-07-19 Kevin Meadows

function.phpに機能の下にソリューションをして追加します。

$('body').css('padding-top',$('.navbar').outerHeight(true));

それは高さに設定されている場合だけ.heightを使用すると、問題が値を取得しているようです自動。 .outerHeight（）を使うと、正しい値を得ることができました。

出典

2017-08-22 16:06:07

あなたはnavbarの高さをつかんで、jqueryを使ってパディングを設定できますか？

$('body').css('padding-top',$('.navbar').height)

出典

2017-07-19 13:19:19 CumminUp07

ありがとうございました。私はJSが少し欠けていると言うでしょう。スクリプトを追加する場所はどこですか？それを関数に入れる必要がありますか？ –

私はあなたの '$（document）.ready（function（）{ \\ put it hereここに }のどこにでも置く必要があると信じています）' – CumminUp07

私はそれを試しても機能しませんでした。これは単純なことであるはずですが、私はそれに干渉する何かがあることを恐れています。これを矛盾させたり無効にしたりすることができるCSSスタイリングの何かを見なければなりませんか？ –

jqueryを使用してパディングを設定します。

<?php 
function myscript() { 
?> 
<script type="text/javascript"> 
jQuery(document).ready(function($) { 
    jQuery('body').css('padding-top',jQuery('.navbar').height); 
}); 
</script> 
<?php 
} 
add_action('wp_footer', 'myscript'); 
?>

出典

2017-07-19 13:35:31

これを試してみましたが、うまくいきませんでした。私はwp_footerをドキュメントの最後に自動的にロードしていますので、スクリプトを頭に入れてみましたが、何もしませんでした。 –

CSSのスタイルには、上書きする可能性のあるものがありますか？ –

問題がない場合は、解像度サイズ –

<?php 
function myscript() { 
?> 
<script type="text/javascript"> 
jQuery(document).ready(function() { 
    jQuery('body').css('padding-top',jQuery('.navbar').height()); 
}); 
</script> 
<?php 
} 
add_action('wp_footer', 'myscript'); 
?>

出典

2017-07-19 16:36:57 ashvek

固定のナビゲーションの下に移動するためのjavascriptによるボディパッディングの設定

答えて

関連する問題