jquery - 固定菜单不能正常工作，扰乱页面的流畅性

Question

我开发了一个 Wordpress 菜单，当你向下滚动时，这个菜单应该会改变，应该变成一个不同的菜单。菜单中的一切正常，但我不明白为什么每次菜单从“相对”更改为“固定”时，我都会丢失一页，这非常烦人。

这是带有菜单的网站: http://matrix-test.com/scoilbhride/

如您所见，当您向下滚动时，菜单会发生变化，我会自动带到幻灯片的中间。它以这种方式不是很实用而且不流畅。

这是我的 html:

<div class="nav-wrap">
    <nav>
        <div class="logo-container">
            <?php happylearning_header_logo() ?>
        </div>
        <div id="menu-toggle-main">
            <span>MENU</span>
        </div>
  <?php
        wp_nav_menu( array( 

            'theme_location' => 'menu-1',
            'container' => 'nav',
            'container_class' => 'nav-bar-conatainer',
            'menu_class' => 'menu-class'

            ) );
  ?>
    </nav>
</div>

有一个 Wordpress 函数而不是 nav 容器，ul 和 li。

所以像这样:

<nav class="nav-bar-conatainer">
   <ul class="menu-class">
       <li><a>example</a></li>
       <li><a>example</a></li>
       <li><a>example</a></li>
   </ul>
</nav>

这是我的CSS:

.nav-wrap {
    position: relative;
    background-color: #577188;
    padding: 40px 20px;
}

.main-navbar-fixed {
    position: fixed;
    padding: 0;
    margin: 0;
    z-index: 1000;
    width: 100%;
    top: 0;
}

.site-logo {
    display: inline;
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 20;
}

.site-logo > a.site-logo__link > img.site-link__img {
    max-width: 190px;
}

.logo-navbar-fixed {
    max-width: 125px !important;
}

nav.nav-bar-conatainer {
    text-align: right;
}

ul.menu-class {
    margin: 0;
    margin-left: 190px;
    padding: 0;
}

ul.menu-class > li {
    list-style: none;
    display: inline-block;
    padding: 12px;
    margin: 0;
}

ul.menu-class > li.current-menu-item {
    border-bottom: 3px solid #fff;
}

ul.menu-class > li > a {
    color: #fff;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: bold;
}

ul.menu-class > li > a:hover {
    color: #c7d13e;
}

#menu-menu_website > li > ul.sub-menu  {
    display: none;
    position: absolute;
    padding: 20px;
    padding-top: 20px;
    margin: 0;
    background-color: #7e9cb9;
}

#menu-menu_website > li:last-child > ul.sub-menu {
    right: 0px;
}

#menu-menu_website > li:hover > ul {
    display: block;
    z-index: 9999;
}

#menu-menu_website > li > ul > li {
    list-style: none;
    text-align: left;
}

#menu-menu_website > li > ul > li > a {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
  white-space: nowrap;
}

#menu-menu_website > li > ul > li > a:hover {
    color: #c7d13e;
}

#menu-toggle-main {
    display: none;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #000;
    margin-top: 15px;
    margin-bottom: 15px;
}

#menu-toggle-main > span {
    color: #fff;
    font-weight: bold;

}

.active-main-menu {
    display: block !important;
}

.margin-from-header {
    margin-top: 120px;
}

.bkg-img-subpages {
    min-height: 250px;
    background-size: cover;
    background-repeat: none;
    background-position: center center;
}

这是我的 jQuery:

jQuery(document).ready(function() {

  jQuery(window).scroll(function () {
      //if you hard code, then use console
      //.log to determine when you want the
      //nav bar to stick.
      console.log(jQuery(window).scrollTop())
    if (jQuery(window).scrollTop() > 180) {
      jQuery('.nav-wrap').addClass('main-navbar-fixed');
    }
    if (jQuery(window).scrollTop() < 181) {
      jQuery('.nav-wrap').removeClass('main-navbar-fixed');
    }
  });
});


jQuery(document).ready(function() {

  jQuery(window).scroll(function () {
      //if you hard code, then use console
      //.log to determine when you want the
      //nav bar to stick.
      console.log(jQuery(window).scrollTop())
    if (jQuery(window).scrollTop() > 180) {
      jQuery('.site-link__img').addClass('logo-navbar-fixed');
    }
    if (jQuery(window).scrollTop() < 181) {
      jQuery('.site-link__img').removeClass('logo-navbar-fixed');
    }
  });
});

Answer 1

按照我的建议

.site-content-wrap {padding-top: 194px}
header{
    position: absolute;
    top: 0;
    z-index: 5;
    width: 100%;
}

您的主标题会占用固定标题不会占用的空间。因此，当主标题消失时，它占用的空间也会消失。