CODEWITHSUNDEEP
jqueryhtmlcss
mymymy
mymymy

Reputation: 3

How to run function when user scrolls more than 10px?

I'm trying to find a way to trigger a function when the user scrolls. But only when the user scrolls more than x amount – say 10px – to avoid accidental / tiny page scrolls.

I currently have a fixed navigation bar spanning the top of my page. When the user scrolls down the class 'retreat' is added, hiding the nav bar. When the user scrolls up, the class 'retreat' is removed:

$(function(){
    var previousScroll = 0;
    navOffset = $('nav').height()
});

$(window).scroll(function () {
    var currentScroll = $(this).scrollTop();
    if (currentScroll > navOffset) {
        if (currentScroll > previousScroll) {
            $('nav').addClass("retreat");
        } else {
            $('nav').removeClass("retreat");
        }
    } 
    previousScroll = currentScroll;
});

However, this often runs accidentally, at the slightest touch or movement of the mouse. Is there a way to ignore very small scrolls, and only run the function when the user scrolls more than 10px?

Check out this fiddle for a working demo: http://jsfiddle.net/mymymy/An3LZ/

Upvotes: 0

Views: 852

Answers (2)

Bla...
Bla...

Reputation: 7288

For the safest and robust way, I think it would be better to create 1 variable for each scroll up and scroll down and use % to check if any of has reached your treshold. Check out this JSFiddle

var scroll_down = 1;
var scroll_up = 1;
$(window).scroll(function () {
    var currentScroll = $(this).scrollTop();    
    if (currentScroll > navOffset) {
        if (currentScroll > previousScroll) {
            scroll_down++;
            scroll_up = 1;
        } else {
            scroll_up++;
            scroll_down = 1;
        }
        if(scroll_down%20 == 0){  //change 20 to bigger value for bigger treshold
            $('nav').addClass("retreat");
        } 
        else if(scroll_up%20 == 0){
            $('nav').removeClass("retreat");
        }
    }else{
        $('nav').removeClass("retreat");
        scroll_up = 1;
        scroll_down = 1;
    }
    previousScroll = currentScroll;
});

EDIT: At first, I think it's kinda simple question, but somehow there are some holes/bugs if that I didn't pay attention too.. So, I just change my answer, hope it helps..

Upvotes: 0

SW4
SW4

Reputation: 71160

Simply add an additional check for the difference between the two scroll positions (40 is the amount of pixels clicking the scroll up/down icons on the scrollbar moves the page in Chrome, change as you see fit):

Demo Fiddle

Change your JS to the below:

var previousScroll = 0,
    navOffset = $('nav').height()

$(window).scroll(function () {

    var currentScroll = $(this).scrollTop();
    if (currentScroll > navOffset) {
        if (Math.abs(currentScroll - previousScroll) > 40) {
            if (currentScroll > previousScroll) {
                $('nav').addClass("retreat");
            } else {
                $('nav').removeClass("retreat");
            }
        }
    }
    previousScroll = currentScroll;
});

Upvotes: 1

Related Questions