Toggle class when object visible in the viewport

Question

I need a script which toggle a class when another class or section is visible in the viewport (during scrolling).

Here I have an script which works for precised distance from top, but can somebody help me to modify it for my needs?

$(window).scroll(function(){
      if ($(this).scrollTop() > 50) {
          $('#viewport').addClass('turn_on');
      } else {
          $('#viewport').removeClass('turn_on');
      }
  });

Zakaria Acharki · Answer 1 · 2015-12-22T19:30:18.867

2

Working fiddle

Try to add function that detect if element passed in argument is visible :

function isVisisble(elem){
    return $(elem).offset().top - $(window).scrollTop() < $(elem).height() ;
}

$(window).scroll(function(){
   if (isVisisble( $('your_element') ))
      $('#viewport').addClass('turn_on');
   } else {
      $('#viewport').removeClass('turn_on');
   }
});

Hope this helps.

edited Dec 22 '15 at 19:30

answered Dec 22 '15 at 19:14

Zakaria Acharki

66,747
15
75
101

Unfortunately it doesn't work:/ Check this: [Fiddle](http://jsfiddle.net/qbdgc2nv/42/) – Lukas Dec 22 '15 at 19:22
Check the console and you can see in live HTML that the class will be added and removed depending to the scroll. – Zakaria Acharki Dec 22 '15 at 19:42
Glad to helo, You're Welcome. – Zakaria Acharki Apr 26 '20 at 13:51
remember to add a open curly brackets before first statement on if condition. – Ricson Goo Jul 25 '23 at 05:54

score 1 · Answer 2 · answered Dec 22 '15 at 19:22

A couple of things. First the scroll event (as well as the resize event) fire multiple times. Traditionally, developers have used something called debouncing to limit the number of times a function fires. I've never got it to work correctly, so instead I check if a condition is met before continuing. You are basically doing this already.

var bool = false
$(window).on('scroll', function(){
   if(!bool){
      bool = true;
      //fire the function and then turn bool back to false.
   };
});

The next thing you need is to identify the element to add the class to. Let's say it has an id of foo.

var yOffset = $('#foo').offset().top;

From here, you'll need to compare the current vertical scroll position with that of the yOffset. You may also need to add the height of the element for when it scrolls out of frame.

var elHeight = $('#foo').height();

The element should be completely in frame with the $(window).scrollTop() equals the yOffset and out of frame when the $(window).scrollTop() is greater than yOffset + elHeight.

This is all assuming the element isn't in the frame to begin with. If it is, it will be trickier but it's a start.

Thanks for this explanation, my js knowledge is poor but it helps. — Lukas, Dec 22 '15 at 19:37

score 1 · Answer 3 · edited May 23 '17 at 11:44

1

Thx everyone for help. Here I found the solution: LINK

And here is the modified script:

$(document).ready(function () {
    var windowHeight = $(window).height(),
        gridTop = windowHeight * 0.1,
        gridBottom = windowHeight * 1;
    $(window).on('scroll', function () {
        $('.inner').each(function () {
            var thisTop = $(this).offset().top - $(window).scrollTop();

            if (thisTop > gridTop && (thisTop + $(this).height()) < gridBottom) {
                $(this).addClass('on');
            }  
        });
    });
});

edited May 23 '17 at 11:44

Community

1
1

answered Dec 22 '15 at 20:33

Lukas

159
2
4
18

Thanks for sharing your solution. It's working for me – Imtiaz Apr 26 '20 at 11:06

Toggle class when object visible in the viewport

3 Answers3