1

在 wordpress 中，我开发了一个网站。我有两个侧边栏。在左侧边栏中，我有 wordpress 自定义菜单。所以当页面向下滚动时，我希望左侧边栏菜单处于固定位置，所以我只使用了这个 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

这是因为您的左侧边栏有一个唯一的孩子，如果将 side 标签设置为固定，它会在您的主要内容<aside>容器中消失，因此div 将向左移动。您必须找到一种方法，以便仍然有一个标签（或任何标签将用作虚拟标签）来保持左侧边栏的宽度并防止内容在您的类被 JS 应用后移动。#inner-page<aside>.fixed

但这是一种丑陋的做法。我能想到的另一种方法（更好）是在应用类后立即为您的 div 添加一个左边距，相当于您左侧边栏的宽度。虽然我认为当有其他标签不会导致内容向右移动时，这会影响其他页面 - 解决方法是，添加一个条件语句，如果左侧边栏下只有一个标签，只有这个边距 -左边被称为。#inner-page.fixed<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

为 div 样式添加透明边框，#teritary在文件的第 1673 行定义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

我会说这在 CSS 中使用position: fixed我认为不需要 Jquery 的属性是可能的。我只在手机上查看，所以我可能看不到完整尺寸的视图。

于 2013-01-13T16:44:25.920 回答