If li hasClass addClass to another div

Question

My navigation get fixed by adding the class (.fix) when i scroll down. It has the following structure:

<div class="navigation-holder fix">
    <div>
        <nav id="navigation">
            <ul id="main-nav">
                <li class="menu-item-93" />
                <li class="menu-item-95" />
                <li class="menu-item-94" />
                <li class="menu-item-96" />
                <li class="menu-item-97" />
                <li class="menu-item-98" />
            </ul>
        </nav>
    </div>
</div>

The li elements get automatically the class (.act) when they are active.

This is the code for the fixed navigation.

$("document").ready(function (jQuery) {
    var nav = $('.navigation-holder');
    $(window).scroll(function () {
        if ($(this).scrollTop() > 125) {
            nav.addClass("fix");
        } else {
            nav.removeClass("fix");
        }
    });
    if ($(".menu-item-95").hasClass("act")) {
        $(".fix").addClass("darkmenu")
    };
});

I'm trying to add another class (.darkmenu) to div (.fix) if li (95,96,98) has class (.act), but it doesn't work...

Answer 1

Put your if condition inside the scrolling event handler, otherwise which will only executed once when the dom elements are loaded.

$(document).ready(function(jQuery) {
    var nav = $('.navigation-holder');
    $(window).scroll(function() {
        if ($(this).scrollTop() > 125) {
            nav.addClass("fix");
        } else {
            nav.removeClass("fix");
        }
        if ($(".menu-item-95").hasClass("act")) {
            $(".fix").addClass("darkmenu")
        }
    });
});

There is no need of "" for the document

Answer 2

I think you shuld do it with another class and in ready callback

$(document).ready(function(){
    if ( $(".menu-item-95").hasClass("act") ) {
        $(".navigation-holder").addClass("darkmenu")};
    }
});

Nesting it would make script checking it every scroll step, i belive that author intended to check it once and change the menu look when user is on particular pages.