粘性菜单并不尊重调整大小

时间:2014-06-25 17:55:02

标签: javascript jquery css

我有一个自适应的网页,并且首先位于页面中间的粘性菜单左右。当我滚动并且菜单到达顶部时它变得固定。这很好用,问题是当我调整菜单上面的内容时,当然菜单变得不那么高了,所以当我再次向后滚动菜单时,当我到达顶部时菜单不会变粘,因为它仍然认为上面的内容与调整大小之前的级别相同,并且不会注意到内容已调整大小。所以当菜单到达顶部时菜单变得粘稠,除非它超过顶部。粘贴需要一些时间。如果我刷新浏览器此问题没有显示,它只显示我正在调整大小时。我想知道菜单是否有任何解决方案来尊重调整大小?这是我的代码:

<header>
  <nav>
    <ul>
      <li>
        <a href='#about'>
          About
        </a>
      </li>
      <li>
        <a href='work.html'>
          Work
        </a>
      </li>
      <li>
        <a href='#services'>
          Services
        </a>
      </li>
      <li>
        <a href='#contact'>
          Contact
        </a>
      </li>
    </ul>
  </nav>
</header>


    header {
      background-color: white;
      border-bottom: 1px solid #eaeaea;
      /*  box-shadow: 1px 0 2px 1px rgba(0, 0, 0, 0.2);*/
      padding: .5em 0;
    }
    header h1 {
      display: none;
    }
    header ul {
      text-align: center;
    }
    header ul li {
      display: inline-block;
    }
    header ul li a {
      padding: 1.08em 0.3em;
      text-transform: uppercase;
      color: #01486b;
      font-size: .8em;
      font-weight: 300;
    }
    header ul li a:hover {
      color: #139ee3;
    }
    .padding
    {
      padding: 3.61em 0 0 0;
    }



      function navigate(e) {
        var element = $(this).attr('href');
        var where = $(element).offset().top-71.5;
        $('html, body').animate({scrollTop:where},1000,'swing');
        e.preventDefault();
      }
      $('nav a').on('click', navigate);



      var offset = $('header').offset().top;
      function changeClass(e) {
        var countScroll = $('html').scrollTop() || $('body').scrollTop();
        if (countScroll >= offset) {
          $('header').addClass('fixed_menu');
          $('main').addClass('padding');
        } else {
          $('header').removeClass('fixed_menu');
          $('main').removeClass('padding');
        }
        e.preventDefault();
      }
      $(document).on('scroll',changeClass);

1 个答案:

答案 0 :(得分:0)

使用:

var countScroll = $('body').scrollTop();

而不是

var countScroll = $('html').scrollTop() || $('body').scrollTop();