Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Konrad Pilch
Konrad Pilch
2,435 Points
Posted by Konrad Pilch
Konrad Pilch
2,435 Points

Whats wrong with this code? 

jQuery(document).ready(function(){

    var navOffset = jQuery("navbar-default").offset().top;

    jQuery(window).scroll(function(){
        var scrollPos = jQuery(window).scrollTop();

        if (scrollPos >= navOffset) {
            jQuery("navbar-default").addClass("fixed-menu");
        }
    });

});
Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

Oh right, I get confused because when we write addClass, we dont need to write anything because it knows it's a class : p

But it still doesnt work. I have no idea why.. and iv tried soo many things, knowing now fomr you guys that i wasn't selecting it -_-

Pleae help me with this code, but i mean with explanation :) I got the idea on how this ment to work, like if this pass 400px, then add class to navbar, if this is less than 400px, then remove the class, or with toggle i guess, im just not sure how to make this in jQuery. Im practicing.

<!-- HEADER -->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
         <a href="index.html" class="navbar-brand"> <i class="icon icon-adn"></i> </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


            <div class="row">
              <div class="col-md-5 col-md-offset-right-1">
                <ul class="nav navbar-nav pull-right">
                  <li><a href="index.php">Home</a></li>
                  <li><a href="">About</a></li>
                  <li><a href="">Blog</a></li>
                </ul>
              </div>

              <div class="col-md-5 col-md-offset-1">
                <ul class="nav navbar-nav pull-left">
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                      <li><a href="menu-template.php">Indian</a></li>
                      <li><a href="menu-template.php">Chinese</a></li>
                      <li><a href="menu-template.php">Mexican</a></li>
                      <li><a href="drink-template.php">Drinks</a></li>
                      <li><a href="menu-template.php">Desserts</a></li>
                    </ul>
                  </li>
                  <li><a href="">Reservation</a></li>
                  <li><a href="">Contact</a></li>
                </ul>
              </div><!-- ofest -->
            </div><!-- /row -->

        </div><!-- container -->
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

jQuery(document).ready(function(){

    var navOffset = jQuery(".navbar").offset().top;

    jQuery(window).scroll(function(){
        var scrollPos = jQuery(window).scrollTop();

        if (scrollPos >= navOffset) {
            jQuery(".navbar").addClass("fixed-menu");
        }
    });

});
Matthew Smart
Matthew Smart
12,567 Points
Matthew Smart
Matthew Smart
12,567 Points

What is your actual problem? The class .fixed-menu isnt adding on?

Matthew Smart
Matthew Smart
12,567 Points
Matthew Smart
Matthew Smart
12,567 Points

That could be for a number of reasons. What does it say in your console? Have you included jQuery into your project?

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

It's all good.

it just says it just displays #document at the right end. But no errors.

Matthew Smart
Matthew Smart
12,567 Points
Matthew Smart
Matthew Smart
12,567 Points

OKay, copy and past all of your html/css/javascript into a jsfiddle here https://jsfiddle.net/

And post the link so that i can replicate the issue

2 Answers

Carlos Federico Puebla Larregle
Carlos Federico Puebla Larregle
21,073 Points
Carlos Federico Puebla Larregle
Carlos Federico Puebla Larregle
21,073 Points

Maybe I'm wrong but that "navbar-default" shouldn't be prefix with a dot or a "#" ?

Matthew Smart
Matthew Smart
12,567 Points
Matthew Smart
Matthew Smart
12,567 Points

The reason is that you are not selecting the element you wish to.

<div class="hello"></div>

To select this in jquery:

$('.hello')

If it was an ID like: 

<div id='hello'></div>

Then you would select it like:

$('#hello')

So basically you have missed the . or # in your jquery selector.