CODEWITHSUNDEEP
jqueryresize
user3724896
user3724896

Reputation: 139

Remove class when window is resized

First I say, what I need to get as a result.

I need to, when window width is more than 500px, in my navigation menu added class "fixed". When window width is less than 500px, from that navigation menu class "fixed" was removed.

This example working with $(window).ready(), but with $(window).resize() class "fixed" is't removing, when window is less than 500px. I'm confused.. What problem? Thanks in advance

Jsfiddle

function navigation() {
    var windowWidth = $(window).width();

    if ( windowWidth > 500 ) {
        $(document).scroll(function () {
            var menuFixed = $(this).scrollTop();
            if (menuFixed > 300) {
                $('.nav').addClass('fixed');
            } else {
                $('.nav').removeClass('fixed');
            }
        });
    } else {
        $('.nav').removeClass('fixed');
    }
}

$(window).ready(function(){
    navigation();
});

$(window).resize(function(){
    navigation();
});

Upvotes: 0

Views: 286

Answers (1)

Roleat
Roleat

Reputation: 61

You could solve this with CSS3

@media max-width 500px {
.menuFixed { position: fixed;}
}

Refer to Mozilla ♥ for more details

Upvotes: 2

Related Questions