CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Modrummer
Modrummer

Reputation: 87

JavaScript to change navbar color on scroll not working

My goal is to make my nav-bar change from transparent to a specified color after scrolling. However, my code doesn't seem to be effective, as the bar remains transparent after scrolling. I've searched this issue with some success, however I feel my js code ought to be sufficient for what I'm trying to accomplish; just without some minor mistakes I might have in the js, css, or html file.

JS:

$(document).ready(function()
{
    var scroll_start = 0;
    var startchange = $('.navbar-default');
    var offset = startchange.offset();

    $(document).scroll(function() 
    {
        scroll_start = $(this).scrollTop();
        if (scroll_start > offset.top)
        {
            $('.navbar-default').css('background-color', 'black');
        }
        else
        {
            $('.navbar-default').css('background-color', 'transparent');
        }
    });

});

CSS:

.navbar-default {
    background: transparent !important;
    transition-duration: 1s;
}
.color-fix>li>a {
    color: white !important;
}
.color-fix>a {
    color: white !important;
}
#nav-right {
    float: right;
}

HTML: (The undefined classes are from bootstrap)

<nav class="navbar navbar-default navbar-fixed-top">
   <div class="navbar-header color-fix">
       <a class="navbar-brand" href="">g·nee</a>
   </div>
   <ul class="nav navbar-nav color-fix" id="nav-right">
      <li><a href="">Home</a></li>
      <li><a href="">Page 1</a></li>
      <li><a href="">Page 2</a></li>
   </ul>
</nav>

Upvotes: 0

Views: 706

Answers (2)

Sajan
Sajan

Reputation: 821

remove !important from css, its prevent style overwriting.

.navbar-default {
    background: transparent ;
    transition-duration: 1s;
}
.color-fix>li>a {
    color: white ;
}
.color-fix>a {
    color: white;
}
#nav-right {
    float: right;
}

Upvotes: 0

A. L
A. L

Reputation: 12639

!important is in the way, remove it and it works.

https://jsfiddle.net/2gq2nqhr/

Upvotes: 1

Related Questions