Нужна помощь в повышении эффективности моего кода HTML и CSS для повышения эффективности навигации

$(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? Мой метод кажется мне неуклюжим и неэффективным. Иногда анимация может быть скачкообразной.


javascript html jquery css transit
person Bob    schedule 30.10.2014    source источник
comment
Что вы имеете в виду под более эффективным?   -  person Héctor    schedule 30.10.2014
comment
Что ж, эффект имеет тенденцию быть нестабильным и не кажется мне очень эффективным. И потому что мне нужно сбросить fx.speeds во время отображения и скрытия и т. Д. Я считаю более эффективным, если бы я мог делать это полностью с переходами и путевыми точками CSS, например, но мне нужна помощь.   -  person Bob    schedule 30.10.2014
comment
добавить блокировку, чтобы функция прокрутки немедленно возвращалась, если она уже запущена? В остальном это, вероятно, вопрос скорее к codereview.stackexchange.com.   -  person Mike 'Pomax' Kamermans    schedule 30.10.2014
comment
Добавление блокировки, чтобы навигация сразу сбрасывалась после скрытия, сделало бы ее намного более эффективной, в отличие от необходимости регулировать скорость, как я сейчас делаю. Как бы я это сделал?   -  person Bob    schedule 30.10.2014
comment
Можете ли вы дать ссылку на сайт, который показывает, какой эффект вы пытаетесь получить   -  person Muhammad Umer    schedule 30.10.2014
comment
Да, вот так: tawk.to Посмотрите, как появляется новая навигация с эффектом вертикального раскрывающегося списка после прокрутка заголовка? Это то, чего я пытаюсь достичь.   -  person Bob    schedule 30.10.2014

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете попробовать использовать 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/

person Marian Gibala    schedule 30.10.2014
comment
Этот метод неэффективен, потому что, если пользователь удерживает полосу прокрутки во время прокрутки вниз, ослабление не вступит в силу. Ослабление не будет работать, пока пользователь не уберет курсор с полосы прокрутки. - person Bob; 30.10.2014