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!!');
    }                               
});

```