javascript - 需要帮助使我的 HTML 和 CSS 代码更有效地实现导航效果

Question

$(document).ready(function(){       
    $("#sticky-header").hide();
});   

$(window).scroll(function(){
   if( $(document).scrollTop() > 160 ) {
      $.fx.speeds._default = 300;
      $('#sticky-header').show();
      $("#sticky-header").transition({ y: 60 });
   } else {
      $.fx.speeds._default = 0;
      $('#sticky-header').clearQueue().transition({ y: 0 });
      $('#sticky-header').hide();
   }
});

这是我的代码:http://jsfiddle.net/de74ezo5/

我试图在滚动经过顶部标题时向下滑动新导航，然后在返回时将其隐藏。有没有更有效的方法来做到这一点？可能与 CSS 过渡？我的方法对我来说显得笨拙且效率低下。动画有时会跳动。

Answer 1

您可以尝试使用 jQuery .animate() 和一些缓动。

$(window).scroll(function(){
   if( $(document).scrollTop() > 160 ) {

       $("#header").stop(true,false).animate({top:"-160px"}, 700, "easeInOutQuart")  
       $("#sticky-header").stop(true,false).animate({top:"0px"},700, "easeInOutQuart")  


   } else {

        $("#header").stop(true,false).animate({top:"0px"},1000, "easeInOutQuart")  
        $("#sticky-header").stop(true,false).animate({top:"-100px"},1000, "easeInOutQuart")  

   }
});

示例如下:http://jsfiddle.net/9c56n442/1/