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();
   }
});

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.

Bob
  • 1
  • 1
  • What do you mean with "more efficient"? – Héctor Oct 30 '14 at 00:19
  • Well the effect tends to be jumpy and doesn't appear very efficient to me. And because I have to reset the fx.speeds during showing and hide, etc. What I find to be more efficient is if I could do this entirely with CSS transitions and waypoints, for example, but I need assistance. – Bob Oct 30 '14 at 00:27
  • 1
    add a lock so that the scroll function immediately returns if it's already running? Other than that, this is probably more a question for http://codereview.stackexchange.com – Mike 'Pomax' Kamermans Oct 30 '14 at 00:30
  • Adding a lock so the navigation immediately resets upon being hidden would make it a heck of a lot more efficient, as opposed to having to adjust the speed like I am currently doing. How would I go about doing that? – Bob Oct 30 '14 at 00:32
  • can you link to a site that shows what effect you are trying to get – Muhammad Umer Oct 30 '14 at 00:48
  • Yeah, here you go: https://www.tawk.to/ See how a new navigation appears with a vertical drop-down effect after scrolling past the header? This is what I am trying to achieve. – Bob Oct 30 '14 at 00:52

1 Answers1

0

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/

Marian Gibala
  • 874
  • 7
  • 9
  • This method isn't efficient because if the user is holding the scrollbar while scrolling down, the easing won't come in effect. The easing won't work until the user has released cursor from the scrollbar. – Bob Oct 30 '14 at 01:37