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/

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

1 个答案: