Event scroll up and fixed header jquery

Question

I have a function

  $(document).ready(function () {
    var lastScroll = 0;
    $(window).scroll(function(event){
        var st = $(this).scrollTop();
        if ((lastScroll - st) == 5) {
           $("header").css("position", "fixed");
        }
        else {
          $("header").css("position", "absolute");
        }
        lastScroll = st;
    });
  });

But I want, when I scroll up on 5px, header again shows. How I can follow event scroll up 5px?

Lucas Lazaro · Accepted Answer · 2016-10-30 19:29:26Z

1

You're updating your lastScroll too often, to make sure it has scrolled past a certain delta (in your case 5px) you should include that clause before checking if the user has scroll up or down.

This tutorial may help you, but I also created a fiddle with an updated version of your code.

But it would go like this:

 $(document).ready(function () {
    var lastScroll = 0;
    $(window).scroll(function(event){
        var st = $(this).scrollTop();
        // Make sure they scroll more than delta
        if(Math.abs(lastScroll - st) <= 5)
            return;

        if (st < lastScroll) {
           $("header").css("position", "fixed");
        } else {
          $("header").css("position", "absolute");
        }
        lastScroll = st;
    });
  });

edited Oct 30, 2016 at 19:29

answered Oct 30, 2016 at 19:07

Lucas Lazaro

1,5269 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Event scroll up and fixed header jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related