粘性导航 jquery css 代码性能答案

【问题标题】：Sticky nav jquery css code performance粘性导航 jquery css 代码性能
【发布时间】：2015-02-07 06:04:09
【问题描述】：

我希望我的导航表现得像一个“粘性导航”，而不是使用插件，所以我试图自己想出一个解决方案。

似乎最合适的做法是在条件语句中使用 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 有趣的事情是正确对齐子菜单。我确信有更好的方法来做到这一点。但是，我的问题是：有没有更高效的方法来做到这一点？

【问题讨论】：

标签： jquery css performance

【解决方案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; }

【讨论】：