1

ワードプレスで私はウェブサイトを開発しました。その中で私は2つのサイドバーを持っています。左側のサイドバーには、ワードプレスのカスタムメニューがあります。ページが下にスクロールされるときに、左側のサイドバーメニューを固定位置にしたいので、このjQueryを使用しました

    jQuery(document).ready(function () {  
  var top = jQuery('.widget_nav_menu').offset().top - parseFloat(jQuery('.widget_nav_menu').css('marginTop').replace(/auto/, 0));
  //console.log(top);
  jQuery(window).scroll(function(event) {
    // what the y position of the scroll is
    var y = jQuery(this).scrollTop();
    //console.log(y);
    // whether that's below the form
    if (y >= top) {
      // if so, ad the fixed class
      jQuery('.widget_nav_menu').addClass('fixed');
    } else {
      // otherwise remove it
      jQuery('.widget_nav_menu').removeClass('fixed');
    }
  });
});

メニューの上に何かがある場合、これは正常に機能しています。ただし、メニューしかない場合は、コンテンツがフローティング部分でメニューにマージされます。これで、このライブサイトにアクセスすると、実際の問題を確認できます。このサイトでは、ペイロールソフトウェアのページに移動してページをスクロールすると、jQueryを使用したため、左側のメニューが上部で修正されていることがわかります。ここで大丈夫です。ただし、無料のトレイルまたは購入ページに移動してページを下にスクロールすると、メインコンテンツ部分がメニューにマージされていることがわかります。それで、誰かが私がこれを解決するのを親切に手伝ってくれるでしょうか？どんな助けや提案も非常に高く評価されます。

注 サイトにアクセスしたときに500エラーが表示された場合は、ページを更新するだけで再度機能します。

4

3 に答える 3

0

これは、左側のサイドバーに子が1つだけあり、asideタグがfixedに設定されている場合、メインコンテンツ<aside>コンテナに子が表示されなくなるため、 divが左にシフトするためです。左側のサイドバーの幅を維持し、クラスがJSによって適用された後、コンテンツが移動しないようにするために、タグがまだ存在する（または任意のタグがダミーとして機能する）方法を見つける必要があります。#inner-page<aside>.fixed

しかし、それはそれを行うための醜い方法です。私が考えることができるもう1つの方法（これはより良い）は、クラスが適用されるとすぐに、左側のサイドバーの幅に相当する左マージンを#inner-pagedivに追加することです。これは、コンテンツをさらに右にシフトしない他のタグが.fixedある場合に他のページに影響を与えると思いますが、回避策は、左側のサイドバーの下にタグが1つしかない場合は、このマージンだけになるような条件ステートメントを追加することです。左が呼ばれます。<aside>.fixed<aside>

大まかにそう：

if (y >= top) {
  jQuery('.widget_nav_menu').addClass('fixed', function(){

  //inserted, fine tune this to a working code, untested
    if ( $('#teritary aside:only-child').length ) {
    $("#inner-page").css("margin-left", "250px");
    }
  //or you can omit this else statement
  else { $("#inner-page").css("margin-left", "0"); } 

});
} else {
  // otherwise remove it
  jQuery('.widget_nav_menu').removeClass('fixed');
}
于 2013-01-13T18:56:07.767 に答える
0

ファイル#teritaryの1673行で定義されているdivスタイルに透明な境界線を追加します。wp-content/themes/ValuePayroll/style.css

#teritary {
  width: 230px;
  float: left;
  margin: 0 10px 0 0;
  border: solid 1px transparent;
}
于 2013-01-13T21:29:38.933 に答える
-1

これは、CSSposition: fixedでJqueryを必要としないプロパティを使用して可能だと思います。モバイルでしか表示していないため、フルサイズで表示されない場合があります。

于 2013-01-13T16:44:25.920 に答える