需要幫助使我的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/