How to detect if the user has scroll 100px from current position

Question

I have a one-page website where I am adding a class while the user clicks on nav. However, if the user has scroll 100px from the current location the class need to remove.

DEMO gh pages link

//working fine
var scrollvalue = 0;
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
     scrollvalue = $(window).scrollTop();
     $(".copyright").addClass("activecopy");
});

  //not working fine
  $(window).scroll(function() {
      if($(window).scrollTop() > 100) {
          $('.copyright').removeClass('activecopy');
      }
  });

Note: I have already read stackoverflow post such as post1 and post2

What is the problem you are facing, exactly? From a cursory glance, there appears to be a typo in 'remove' `$('.copyright').remvoeClass('activecopy');` and the line `$(scrollvalue).scrollTop() > 100` should probably be `$(window).scrollTop() > 100` — Chirag Ravindra, May 09 '18 at 08:28
The class get remove immediately after I click on nav. It should wait until I scroll `100px`. Thanks, I have updated my code. — Santosh, May 09 '18 at 08:33
Shouldn't you also be checking how much the user has scrolled from the recorded scroll position (`scrollvalue`) as opposed to the constant value `100`? — ZombieTfk, May 09 '18 at 08:35
Could you share your HTML ? (The minimum to make a working snippet) — Takit Isy, May 09 '18 at 08:44
Pls consider either jquery.inview: https://github.com/protonet/jquery.inview or Intersection Observer: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API. They might be a lot more performant than your current solutions. — whales, May 09 '18 at 09:32

Chirag Ravindra · Accepted Answer · 2018-05-09T09:52:21.667

It's a little hard to figure out what exactly the problem is as you have no shared the corresponding HTML markup. Try the following and let me know if it helps.

var scrollvalue = 0;
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function () {
    scrollvalue = $(window).scrollTop();
    $(".copyright").addClass("activecopy");
});


$(window).scroll(function () {
    if (($(window).scrollTop() - scrollvalue) > 100) {
        $('.copyright').removeClass('activecopy');
    }
});

EDIT:

As I said, it's hard to see what's happening because you haven't shared markup. Here is a sample. Hope it helps.

EDIT 2:

To make this generic, you can wrap your code which registers for click listeners and scroll listeners in a function which accepts which elements to operate on as arguments. Sample Below.

function registerScrollTrigger(anchor, target) {
  var $a = $(anchor);
  var $t = $(target);
  $a.click(function() {
    //Get scroll position at the time of the click
    var currentScroll = $(window).scrollTop();

    function handleScroll() {
      // Demo code to show current scroll on the screen
      $t.html('Current Scroll: ' + ($(window).scrollTop() - currentScroll));

      // Check if the user has scrolled 100px since clicking the tag
      if (($(window).scrollTop() - currentScroll) > 100) {

        // Remove active class from element
        $t.removeClass('active');

        // Demo code ti indicate that the scroll to 100px is complete
        $t.html('Complete');

        // Stop listening for scroll events [Optional but recommmended]
        $(window).off('scroll', handleScroll);
      }


    }

    // Add active class to element [Make it blue]
    $t.addClass('active');

    // Listen for scroll event and check if 100px has passed
    $(window).scroll(handleScroll);
  });
}

registerScrollTrigger('#a1', '#scroll1');
registerScrollTrigger('#a2', '#scroll2');

div.scroll {
  margin-top: 50px;
}

div.scroll.active {
  background: blue;
  color: white;
}

div#pad {
  height: 1000px;
}

h4 {
  margin-bottom: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h4>Scroll Down For the Button</h4>
  <a id="a1" class="js-scroll">Click Me </a>
  <div id="scroll1" class="scroll">
    Start scrolling after clicking the above button
  </div>
   <h4>Scroll Down For Another Button</h4>
  <a id="a2" class="js-scroll">Click Me Too</a>
  <div id="scroll2" class="scroll">
    Start scrolling after clicking the above button
  </div>
  <div id="pad"></div>

Note:

You can also do something similar by setting a data-target attribute on the anchor which can be used to determine which item to add the class to and remove the class from instead of passing both items as a parameter

This code not removing class after scroll 100px from current position. — Santosh, May 09 '18 at 08:44
I have updated my code with a working sample for your reference — Chirag Ravindra, May 09 '18 at 08:57
Your code looks good. But that id `#scroll` seems static. I might have multiple navigation point. And each click I want to detect 100px scroll from the current location. I have provided the github link of ghpages. — Santosh, May 09 '18 at 09:18
Have edited my code to have a generic wrapper which can be called multiple times on multiple elements by passing any jQuery compatible selector or element as arguments — Chirag Ravindra, May 09 '18 at 09:52

score 0 · Answer 2 · answered May 09 '18 at 08:52

$(window).scroll(function() {
       var height = $(window).scrollTop();
       if (height > 100) {
            $(".copyright").addClass("activecopy");
       } else {
          $('.copyright').removeClass('activecopy');
       }


   });

I am using this for showing my gototop button in bottom. Hope this will works for you.....

How to detect if the user has scroll 100px from current position

2 Answers2