Question

我希望我的导航行为像＆＃34;粘性导航＆＃34;而不是使用插件，所以我试着自己想出一个解决方案。

似乎最合适的事情就是在条件语句中使用jquery更改所有css值。

以下是我解决这个问题的方法：

$(window).scroll(function() {
    if($(document).scrollTop() > 50)
    {
        $('.site-header').css("height", "48px");
        $('.site-title a').css("background-size", "45px 45px");
        $('.genesis-nav-menu > li').css("line-height", "50px");
        $('.genesis-nav-menu .sub-menu').css("top", "0").css("margin-top", "48px");
    }
    else
    {
        $('.site-header').css("height", "100px");
        $('.site-title a').css("background-size", "101px 101px");
        $('.genesis-nav-menu > li').css("line-height", "100px");
        $('.genesis-nav-menu .sub-menu').css("top", "100").css("margin-top", "100px");
    }
});

margin-top有趣的业务是正确对齐子菜单。我确信有更好的方法可以做到这一点。但是，我的问题是：有更高效的方法吗？

Answer 1

浏览器滚动的每个像素都发生了太多事情。以下是有关scroll事件的一些良好做法：jQuery resize(), scroll(): good practice to use variables?

我会做这样的事情：

<强>标记：

<div id="menu">
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
    <li>Careers</li>
    <li>More</li>
  </ul>
</div>

<强> JS：

(function($) {
  $(document).ready(function() {
    var 
    $menu = $('#menu'),
    $clone = $menu.clone(true),
    $window = $(window),
    top = $menu.offset().top,
    topDown = top + $menu.height(),
    currentScroll = 0;

    $clone.addClass('fixed');
    $menu.before($clone);

    $window.scroll(function() {
      currentScroll = $window.scrollTop();

      if(currentScroll > topDown) {
        $menu.addClass('invisible');
        $clone.addClass('visible');
      } else {
        $menu.removeClass('invisible');
        $clone.removeClass('visible');
      }
    });
  });
})(jQuery);

<强> CSS：

#menu { background: #e55; }
#menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#menu li {
  display: inline-block;
  padding: 12px;
}
.fixed {
  position: fixed;
  top: 0;
  left: 1em;
  right: 1em;
  z-index: 99;
  opacity: 0;
}
.visible {
  opacity: 1;
  -webkit-transition: opacity .5s ease-in;
  -moz-transition: opacity .5s ease-in;
  transition: opacity .5s ease-in;
}
.invisible { visibility: hidden; }

粘性导航jquery css代码性能

1 个答案: