0

I have some jQuery that only needs to do something when the viewport hits the bottom of a specific element.

enter image description here

In this picture u can see 3 color sections. the blue one is what I see when I load my web page. The black one is where the jQuery applies. and I only want to initialize the black jQuery when the Red part is on the screen.

Is this possible? I am not very good with jQuery but I still tried some thing:

HTML:

<row class="teller-wrapper">  </row>

jQuery:

jQuery('.teller-wrapper').waypoint(function(){

    console.log("ik ben nu in beeld, lopen met die tellers");

}, {offset: 'bottom-in-view'});

But the console log does not show when I scroll over the red part.

At this point I am trying with the Waypoints jQuery extension but I can't get it to work properly.

  • *jQuery Waypoints - v2.0.2
  • *Jquery - v1.11.2

I do not mind using something else than Waypoints extension so any suggestion is welcome. In the meantime ill just keep try and error with what I have now.

I hope someone has a solution

Thanks in advance and happy coding.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
B. Dionys
  • 916
  • 7
  • 34
  • You want to implement like [THIS](https://stackoverflow.com/questions/21935762/start-executing-jquery-function-when-i-scroll-to-a-specific-div) ? – Nimish Jun 02 '17 at 10:15
  • @Nimish Hmm yes something like that ill immediatly will take a look. i find it interesting that i didnt find this myself :O – B. Dionys Jun 02 '17 at 10:16
  • If you have posted your HTML then i might have resolved your issue but you can follow the link and resolve yourself. It would be better as you will learn something – Nimish Jun 02 '17 at 10:18
  • you can also check [this](https://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling) – Prashant Shirke Jun 02 '17 at 10:20
  • @Nimish would like to learn this myself. but i placed the question here for a good push in the right direction what 3 ppl already did by now so im happy enough :D – B. Dionys Jun 02 '17 at 10:47

1 Answers1

2

you can do it with help of jquery scroll library

link : https://api.jquery.com/scroll/

Gaurang Sondagar
  • 311
  • 2
  • 11