web-dev-qa-db-ja.com

14のテーマのトップナビゲーションからスティッキーな動作を削除しますか？

WordPressのテーマ14では、 このサイト のように幅100％のヘッダーの背景画像を使用して、トップナビゲーションのスティッキ動作を削除する方法を考えています。

私はその下にナビゲーションを配置した状態で全幅と最大の高さの一番上の画像が欲しいのですが、あなたが下にスクロールするとナビゲーションはブラウザのウィンドウの一番上に固定されます。

私は13の子テーマを持つ次の.jsを使用することになりました

//$(document).ready(function() {
jQuery().ready(function($) {
var stickyNavTop = $('.navbar').offset().top;

var stickyNav = function(){
var scrollTop = $(window).scrollTop();

if (scrollTop > stickyNavTop) { 
$('.navbar').addClass('sticky');
} else {
$('.navbar').removeClass('sticky'); 
}
};

stickyNav();

$(window).scroll(function() {
stickyNav();
});
});

そして追加

 .sticky { position: fixed; z-index: 100; ... }

こちらの記事に感謝します。

私は14人に同じことを適用できたかもしれませんが、それはトリッキーであり、私は無駄にする時間がありませんでした。

cssheaderstheme-twenty-fourteen
1
cmsdeployed

私がこの質問に答える前に、あなたはすでに 子テーマ を作成したと思います。 理由： あなたは 決して あなたが作者ではないテーマ/プラグインに変更を加えるべきです。これにはコアファイルが含まれます

ソートされた状態では、ナビゲーションメニューの動作は純粋にjsによって制御されます。

  77          /*
  78           * Fixed header for large screen.
  79           * If the header becomes more than 48px tall, unfix the header.
  80           *
  81           * The callback on the scroll event is only added if there is a header
  82           * image and we are not on mobile.
  83           */
  84          if ( _window.width() > 781 ) {
  85              var mastheadHeight = $( '#masthead' ).height(),
  86                  toolbarOffset, mastheadOffset;
  87  
  88              if ( mastheadHeight > 48 ) {
  89                  body.removeClass( 'masthead-fixed' );
  90              }
  91  
  92              if ( body.is( '.header-image' ) ) {
  93                  toolbarOffset  = body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0;
  94                  mastheadOffset = $( '#masthead' ).offset().top - toolbarOffset;
  95  
  96                  _window.on( 'scroll.twentyfourteen', function() {
  97                      if ( _window.scrollTop() > mastheadOffset && mastheadHeight < 49 ) {
  98                          body.addClass( 'masthead-fixed' );
  99                      } else {
 100                          body.removeClass( 'masthead-fixed' );
 101                      }
 102                  } );
 103              }
 104          }

これはjsフォルダのfunctions.jsにあります。

この機能を削除するには（すべての子テーマで）元のfunctions.jsをデキューし（ wp_dequeue_script() を使用）、functions.jsを子テーマにコピーして上記の行を削除し、エンキューする必要があります。修正したjsを wp_enqueue_script() ）を使って。これは wp_enqueue_scripts フックにフックされるカスタム関数の中で行われます

コード内および実際には

  • 子テーマのルートフォルダにjsというファイルを作成します。

  • Functions.jsをコピーして、子テーマのjsフォルダーに貼り付けます。

  • Functions.jsを開き、上記の行を削除します。

  • Functions.jsを安全にする

さて、あなたの子供のテーマのfunctions.phpを開き、そこに以下のコードを追加してください。これにより、親スクリプトがデキューされ、新しく修正されたスクリプトがエンキューされます。

function enqueue_child_functions_js() {

    wp_dequeue_script( 'twentyfourteen-script' ); //dequeue the parent script
    wp_enqueue_script( my-child-script', get_stylesheet_directory_uri() . '/js/functions.js', array( 'jquery' ), '20140717', true ); //enqueue new modified script

}

add_action( 'wp_enqueue_scripts', 'enqueue_child_functions_js', 999 );
2
Pieter Goosen

私が取り組んでいる2014年のテーマであるSepsterの答えを避けて作業するには、この追加機能が必要でした（これが私にとって効果的な完全な解決策です）。

.masthead-fixed .site-header {
  position: relative;
}

@media screen and (min-width: 783px) {
    .admin-bar.masthead-fixed .site-header {
        top:inherit;
    }
}
1
Nicholas Petersen

24テーマでは、masthead-fixedクラスが<body>要素に追加されます。

その結果、次のCSS（3362行目）が作動します。

@media screen and (min-width: 783px)
.masthead-fixed .site-header {
  position: fixed;
  top: 0;
}

これをオーバーライドするために、あなたの子供のテーマから以下のCSSを適用することができます。

.masthead-fixed .site-header {
  position: relative;
}
1
Sepster