execute jquery code when user scrolls down a certain amount (pixels)

Question

I would like to execute the below code when user scrolls to a certain position on the page; for instance 600px; down (from the top). So detect 600px down in PIXELS.

// $(document).ready(function() {
        $(".slidedown").one('load', function () {
            $(this).slideDown(200);
        }).each(function() {
          if(this.complete) $(this).trigger('load');
        });
// });

This did not work:

  $(document).scroll(function(){
      if (document.scrollHeight > 600) {
     $(".slidedown").one('load', function () {
        $(this).slideDown(200);
    }).each(function() {
      if(this.complete) $(this).trigger('load');
    });
   }
});

http://stackoverflow.com/questions/15798360/show-div-on-scrolldown-after-800px/15800696#15800696 — apaul, Sep 30 '15 at 20:10

score 2 · Accepted Answer · answered Sep 30 '15 at 20:03

simply set your threshold of # of pixels before you fire event and this function will be triggered when the user scrolls up or down by n pixels

https://jsfiddle.net/7daffjh8/7/

var scrollAmount = 0;
var pixelsToNotify = 200;

$(document).scroll(function() {
  var distance = $(window).scrollTop();
    console.log(distance, scrollAmount);
    if(distance - scrollAmount > pixelsToNotify){
        alert('user scrolled down event');
        scrollAmount = distance;
    }
    if(distance < scrollAmount - pixelsToNotify){
        alert('user scrolled up event');
        scrollAmount = distance;
    }
});

Hacknightly · Answer 2 · 2015-09-30T20:02:21.740

0

I think something like this will work

$(document).scroll(function(){
   if ($(document).scrollTop() > 600) {
     ... execute code
   }
});

https://jsfiddle.net/ga7140L9/1/

edited Sep 30 '15 at 20:02

answered Sep 30 '15 at 19:55

Hacknightly

5,109
1
26
27

1

That's the concept I'm looking for but did not run at all. – Dr Upvote Sep 30 '15 at 20:00

execute jquery code when user scrolls down a certain amount (pixels)

2 Answers2