0 
$(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トランジションで？私の方法は不格好で非効率に見えます。アニメーションは時々びくびくする傾向があります。

4

1 に答える 1

0

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/

于 2014-10-30T01:01:38.757 に答える