0

I have the following jQuery where I am attempting to hide the header on scroll down and appear on scroll up, but I cannot get it to work? All content that will be slideUp etc... is in a header tag 

 $(document).ready( function () {
        $(window).scroll(function() {

            var currentScrollTop = $(this).scrollTop();
            if (currentScrollTop > 80){
                $('header').slideUp(200);}
            else {
                $('header').slideDown(200);}    
        });
    });

I can get the header to disappear with the following code but really struggling to make it functional

    $(document).ready( function () {
        $('body').scroll(function() {           
            $('header').slideUp(200);
        });
    });

Where am I going wrong? Thanks in advance

Baldráni
  • 5,332
  • 7
  • 51
  • 79
Paul Stephen Davis
  • 153
  • 1
  • 2
  • 16
  • Possible duplicate of [How can I determine the direction of a jQuery scroll event?](http://stackoverflow.com/questions/4326845/how-can-i-determine-the-direction-of-a-jquery-scroll-event) – Baldráni Mar 21 '17 at 21:56
  • Thanks but its not the direction I am concerned with, I am looking for an if statement to activate slideup when .scrolltop() is more than 80px and then slidedown when the user scrolls up page again slidedown, – Paul Stephen Davis Mar 21 '17 at 22:06

1 Answers1

0

I don't get really what is the effect you want to achieve but what you are probably having wrong is the use of window as a referential for .scroll() instead of the use of document.

So try instead to use $(document).scroll(function(){...}); as I've tried in this jsFiddle.

Baldráni
  • 5,332
  • 7
  • 51
  • 79