Question 232350 in Html Question posted in
Some basic documentation can be found here.

Html – Hide Sticky Header on Scroll down but show Sticky Header on scroll up

So I have a script which when you scroll down it adds a class named "hideHeader" which is good, now when you’ll be scrolling up it add showHeader, which is also good, but the problem is when it reaches the top it doesnt remove the class "showheader".

This is my code.

        var didScroll;
        var lastScrollTop = 0;
        var navbarHeight = $('.sticky-header').outerHeight();

        $(window).scroll(function(event){
            didScroll = true;
        });

        setInterval(function() {
            if (didScroll) {
                hasScrolled();
                didScroll = false;
            }
        }, 250);
        function hasScrolled() {
            var st = $(this).scrollTop();
            if(Math.abs(lastScrollTop - st) <= 5)
                return;
            
            if (st > lastScrollTop && st > navbarHeight){
                $('.sticky-header').removeClass('showHeader').addClass('hideHeader');
            } else {
                if(st + $(window).height() < $(document).height()) {
                    $('.sticky-header').removeClass('hideHeader').addClass('showHeader');
                }
            }
            lastScrollTop = st;
        }

I’m clueless why this happens.

Tags:

2

Answers


  1. 0

    The hasScrolled() function is not checking if the scroll position is at the top of the page. The following code will fix that:

    function hasScrolled() {
  var st = $(this).scrollTop();
  if(Math.abs(lastScrollTop - st) <= 5)
    return;

  if (st > lastScrollTop && st > navbarHeight) {
    $('.sticky-header').removeClass('showHeader').addClass('hideHeader');
  } else if (st === 0) {
    $('.sticky-header').removeClass('hideHeader').addClass('showHeader');
  }
  lastScrollTop = st;
}
    Login or Signup to reply.
  2. 0

    It looks like the issue you’re facing is related to the logic used to toggle the classes for the header element. The problem lies in the conditions used to add and remove the classes. The hasScrolled() function is triggered when the user scrolls, and it checks the scroll direction to determine whether to add or remove the classes. However, the condition for adding and removing the classes isn’t working correctly when the scroll position reaches the top.

    To fix this issue, you can modify the hasScrolled() function as follows:

    function hasScrolled() {
var st = $(this).scrollTop();

if (st <= navbarHeight) {
    // Scrolled to the top
    $('.sticky-header').removeClass('hideHeader showHeader');
} else if (st > lastScrollTop && st > navbarHeight) {
    // Scrolling down
    $('.sticky-header').removeClass('showHeader').addClass('hideHeader');
} else {
    // Scrolling up
    $('.sticky-header').removeClass('hideHeader').addClass('showHeader');
}

lastScrollTop = st;

    }

    In this updated version of the hasScrolled() function, the conditions have been adjusted to handle the case when the scroll position is at the top. It first checks if st is less than or equal to navbarHeight, which indicates that the user has scrolled to the top. In this case, both classes are removed from the header element to ensure it is in the correct initial state.

    Additionally, I removed the check for (st + $(window).height() < $(document).height()) since it’s not necessary for the class toggling logic.

    With these changes, the header class should now be properly toggled as you scroll, and the showHeader class should be removed when you reach the top of the page.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search