CODEWITHSUNDEEP
javascriptjquerycss
fwjggYUKGFTYucfty
fwjggYUKGFTYucfty

Reputation: 136

I can't get my navigation to change on scroll

I know it is a repeat question, but I am trying to get my navigation bar to change styling using JavaScript/jQuery/CSS by making jQuery add and remove classes depending on the position of the scrollbar, yet with no prevail. I am a huge noob with jQuery. Could someone tell me if these is something wrong with my code. I have searched for hours and I can't find and error. Here is a working example: http://codepen.io/anon/pen/QbWOJv And here is my code:

// on scroll, 
$(window).on('scroll',function(){

    // we round here to reduce a little workload
    stop = Math.round($(window).scrollTop());
    if (stop > 50) {
        $('.nav').addClass('passed-main');
    } else {
        $('.nav').removeClass('passed-main');
    }
.nav
            {
                background-color: #000000;
                opacity: 0.3;
                width: 100%;
                height: 40px;
                position: fixed;
                top: 0;
                z-index: 2000;
                transition: all 0.3s;
            }
            .nav.past-main
            {
                background-color: #ffffff;
                opacity: 1;
            }
<div class="nav">
        </div>

Upvotes: 0

Views: 44

Answers (1)

Kyojimaru
Kyojimaru

Reputation: 2724

Perhaps the example is something that you want to achieve, and when you try it with your code above, it's not working.

Here's the problem with your code in the snippet:

  1. You forgot to close the function

    // on scroll, 
$(window).on('scroll',function(){    
    // we round here to reduce a little workload
    stop = Math.round($(window).scrollTop());
    if (stop > 50) {
        $('.nav').addClass('passed-main');
    } else {
        $('.nav').removeClass('passed-main');
    }
}); // You forgot to close the function here

  2. You add/remove class passed-main while in your CSS you're using class selector .nav.past-main

  3. Your window doesn't have any scrollbar, so you need to add this to the CSS to test if it works

    body {
    height: 1500px;
}

  4. You forgot to include the jQuery in the Snippet.

Here's the working updated snippet

// on scroll, 
$(window).on('scroll', function () {

    // we round here to reduce a little workload
    stop = Math.round($(window).scrollTop());
    if (stop > 50) {
        $('.nav').addClass('past-main');
    } else {
        $('.nav').removeClass('past-main');
    }
});
.nav {
    background-color: #000000;
    opacity: 0.3;
    width: 100%;
    height: 40px;
    position: fixed;
    top: 0;
    z-index: 2000;
    transition: all 0.3s;
}
.nav.past-main {
    background-color: #ffffff;
    opacity: 1;
}
body {
    height: 1500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="nav"></div>

Upvotes: 1

Related Questions