CODEWITHSUNDEEP
javascriptjqueryhtmlcss
VeNoMexe
VeNoMexe

Reputation: 3

sticky nav, idk what's going on :\

I am having an issue with my sticky nav. The problem seems to be that my JS is not applying the class I have told it to. you can view it live here http://test.makx.ca

Here is my code. 

<script>

$(window).scroll(function() {    
var scroll = $(window).scrollTop();
nav = $('.nav-bar').offset();
if (nav.top <= scroll) {
  $('.nav-bar').toggleClass('sticky-nav');
} else {}
});
</script>

the HTML

<div class="row nav-row">
    <div id="nav-bar" class="medium-12 column nav-bar">
        <ul class="links">
            <li><a href="index.php">home</a></li>
            <li><a href="about.php">about us</a></li>
            <li><a href="pricing.php">pricing</a></li>
            <li><a href="contact.php">contact</a></li>
        </ul>
        <ul class="links-right">
            <li class="has-form">
              <div class="row collapse">
                <div class="large-7 small-7 columns">
                  <input type="text" placeholder="enter text">
                </div>
                <div class="large-3 small-4 pull-2 columns">
                    <a href="#" class="search button expand" style="padding-top: 0.6rem;
                    padding-bottom: 0.6rem;">Search</a>
                </div>
              </div>
            </li>
        </ul>
    </div>
</div>

the CSS

.sticky-nav {
position: fixed;
top:0;
width: 100%;
display: block;
}

any feedback would be most welcoming. This has me and a friend completely stumped.

Upvotes: 0

Views: 43

Answers (1)

elixenide
elixenide

Reputation: 44833

You're using the wrong selector. .nav-bar is a class selector, but you want to select the element with the id nav-bar, not the class nav-bar. Use #nav-bar as the selector instead.

Unrelated to your question, but FYI: Your use of toggleClass is going to have some odd results; it will constantly be toggling the class on and off while the user scrolls.

Upvotes: 2

Related Questions