Add class when div visible on screen

Question

I have this HTML code :

<ul>
    <li class="menu" id="menu-features">
        <a href="#features">Features</a>
    </li>
</ul>

<a id="features"></a>
<div id="div-features">
<!-- SOME CODE HERE -->
</div>

and I have this jQuery script :

    $(document).ready(function(){
        if $('#div-features').visible(){
            $('#menu-features').addClass("active");
        }
    });

now, here's the problem :

I want to add a class to list item, in this case #menu-features only when div #div-features visible on the screen. once it's not visible then the class will be removed.

but, it seems that jQuery .addClass not affecting anything on #menu-features.

what did I do wrong here? thank you.

UPDATE : I tried also, but still failed

$(document).ready(function(){
    if ($('#div-features').is(':visible')){
        //$('#menu-features').addClass("active");
        alert('Hello, World!!');
    }                               
});

score 1 · Answer 1 · answered Oct 14 '21 at 14:20

I'm doing this on scroll

waypoint

is opacity 0 to hide the element then

animated

shows the element if it is 30% visible on window

$(window).scroll(function () {
        $('.waypoint').each(function (i) {
            var bottom_of_object = $(this).offset().top + ($(this).outerHeight() * 0.3);
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            if (bottom_of_window > bottom_of_object) {
                $(this).addClass('animated');
            }
        });

score 0 · Accepted Answer · answered Jan 28 '15 at 06:18

0

Try this :Your if condition having error, please follow below code

$(document).ready(function(){
   if ($('#div-features').is(':visible')){
         $('#menu-features').addClass("active");
    }
 });

answered Jan 28 '15 at 06:18

Bhushan Kawadkar

28,279
5
35
57

nope... still didn't work out... I tried to alert some text too but still that IF condition not triggered. – Saint Robson Jan 28 '15 at 06:22
1

can you share a jsfiddle link with your problem statement? have you added jQuery library to your page? – Bhushan Kawadkar Jan 28 '15 at 06:32
I think the problem is with my safari browser... I works now... thanks – Saint Robson Jan 28 '15 at 06:33
2

bro, I have another issue with your suggestion there... when my website is fully loaded, why the class applied immediately while the div still in the bottom (not visible yet)? any idea what cause it? – Saint Robson Jan 28 '15 at 06:40
I think your are looking for element when visible on the screen after scrolling. This should be handled in different way, see [this](http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling) – Bhushan Kawadkar Jan 28 '15 at 06:45
Not worked for me, I was used it to do animations but doesn't solve my issue – raviramani Jul 26 '19 at 08:12
@raviramani, how can you say that this is wrong answer when user accepted it. It may happen that your problem is something else which does not fit the given solution. Can you share your code on SO and share the link here – Bhushan Kawadkar Aug 19 '19 at 10:53

Add class when div visible on screen

2 Answers2