需要帮助使我的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();
   }
});

Here's my code: http://jsfiddle.net/de74ezo5/

I am trying to slide a new navigation down when scrolling past the top header, and then hide it when returning. Is there a more efficient way to do this? Possibly with CSS transitions? My method appears clunky and inefficient to me. The animation tends to be jumpy sometimes.

Answer 1

You can try to use jQuery .animate() and some easing.

$(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")  

   }
});

Here is the example: http://jsfiddle.net/9c56n442/1/