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! While you're at it, check out some resources Treehouse students have shared here.

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

General Discussion

Posted by angel angel
angel angel
6,620 Points

What am I doing wrong?

I am using boostrap to build my site. I want to use the scrollspy with javascript. I want to scroll down and that the link in the navegation bar can be highlighter. But is not working what am I doing wrong? 

<!DOCTYPE html>
<html lang="eng">
    <head>
        <meta charset="utf-8">
        <ti>my</title>
        <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">

          <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
   <body>

<header>
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
       <div class="container">
           <div class="navbar-header">
               <button type="button" class="navbar-toggle collapsed" data-target="#collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
               <a class="navbar-brand" href="#featured"><h1>my<span class="subhead">SUPER</span></h1></a>
           </div><!--navbar-header-->

           <div class="collapse navbar-collapse" id="collapse">
           <ul class="nav navbar-nav navbar-right">
       <li class="active"><a href="#featured">Home</a></li>
        <li><a href="#mission">mission</a></li>
        <li><a href="#services">services</a></li>
        <li><a href="#staff">staff</a></li>
        <li><a href="#testimonial">testimonial</a></li>   

       </ul>
           </div><!--collapse-->
       </div><!--conatiner-->

    </nav> 

    <div class="carousel slide" data-ride="carousel" id="featured">
        <div class="carousel-inner">
        <div class="item active"><img src="img/11.jpeg" alt="yes"></div>
        <div class="item"><img src="img/11.jpeg" alt="yes"></div> 
            <div class="item"><img src="img/11.jpeg" alt="yes"></div> 
            <div class="item"><img src="img/11.jpeg" alt="yes"></div>
            </div><!--inner carousel-->
        <a class="right carousel-control" href="#featured" role="button" data-slide="prev">
        <span class="glyphicon  glyphicon-chevron-right"></span></a>
        <a class="left carousel-control " href="#featured" role="button" data-slide="next">
        <span class="glyphicon  glyphicon-chevron-left"></span></a>
       </div><!--end carousel slide-->
    </header>
       <div class="main">
       <div class="page" id="mission">
           <div class="content container">
               <h2>Our Mission</h2>
               <div class="row"><p class="col-md-5 col-md-offset-1">mySUPERGREEN strives to blend the best in traditional and alternative medicine in the diagosis and treament of companion animals including dogs, cats, birds, reptiles, rodents, and fish. We apply the wisdom garnered in the centuries old trdaition</p>
        <p class="col-md-5">We strive for the best service out there. We build an enviroment that is safe and secure for you and your families, clients, and staff.</p> </div><!--Row-->

           </div> <!--Conent-container-->
        </div> <!-- Our mission-->

           <div class="page" id="services">
               <div class="content container">
                   <h2>Services</h2>
                   <div class="row">
                <article class="service col-md-4 col-sm-6 col-xs-12">
               <img class="icon" src="img/35.jpg" alt="cool">
                    <h3>Comercial</h3>
                    <p>We offer the best deal for comercial cleaning</p>
                </article>
                <article class="service col-md-4 col-sm-6 col-xs-12">
                 <img class="icon" src="img/40.jpg" alt="cool">
                    <h3>Auto</h3>
                     <p>We offer the best deal for comercial cleaning</p>
                </article>    
                <article class="service col-md-4 col-sm-6 col-xs-12">
                   <img class="icon" src="img/46.jpg" alt="cool">
                  <h3>Home</h3>
                  <p>We offer the best deal for comercial cleaning</p>
                  </article>
                <article class="service col-md-4 col-sm-6 col-xs-12">
                   <img class="icon" src="img/35.jpg" alt="cool">
                     <h3>Comercial</h3>
                        <p>We offer the best deal for comercial cleaning</p>
                  </article>
                  <article class="service col-md-4 col-sm-6 col-xs-12">
                    <img class="icon" src="img/40.jpg" alt="cool">
                   <h3>Auto</h3>
                  <p>We offer the best deal for comercial cleaning</p>
                  </article>  
                    <article class="service col-md-4 col-sm-6 col-xs-12">
                    <img class="icon" src="img/40.jpg" alt="cool">
                   <h3>Auto</h3>
                  <p>We offer the best deal for comercial cleaning</p>
                  </article>     

                   </div><!--row-->
               </div><!--content-container-->
            </div> <!--Services end-->
       <div class="page" id="staff">
           <div class="container-fluid"><h2 id="ourstaff"> Our staff</h2>
               <div class="row">

                   <div class="doctor col-lg-4">
                       <div class="row"><div class="photo col-xs-6 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-2 col-md-offset-2 col-lg-4 col-lg-offset-0"><img class="img-circle" src="img/07.jpg" alt="staff"></div><!--photo-->

       <div class="info col-xs-8 col-xs-offset-2 col-sm-7 col-sm-offset-0 col-md-6 col-lg-8"><h3> Angel</h3>
       <p>  is a guardian of Missy, a three year old Laso mix, who he adopted at the shelter.</p></div><!--info-->
</div><!--row-->
                   </div><!--doctor--> 

                   <div class="doctor col-lg-4">
                       <div class="row"><div class="photo col-xs-6 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-2 col-md-offset-2 col-lg-4 col-lg-offset-0"><img class="img-circle" src="img/07.jpg" alt="staff"></div><!--photo-->

       <div class="info col-xs-8 col-xs-offset-2 col-sm-7 col-sm-offset-0 col-md-6 col-lg-8"><h3> Angel</h3>
       <p> Angel  is a guardian of Missy, a three year old Laso mix, who he adopted at the shelter.</p></div><!--info-->
</div><!--row-->
                   </div><!--doctor--> 
               <div class="doctor col-lg-4">
                       <div class="row"><div class="photo col-xs-6 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-2 col-md-offset-2 col-lg-4 col-lg-offset-0"><img class="img-circle" src="img/07.jpg" alt="staff"></div><!--photo-->

       <div class="info col-xs-8 col-xs-offset-2 col-sm-7 col-sm-offset-0 col-md-6 col-lg-8"><h3> Angel </h3>
       <p> Angel  is a guardian of Missy, a three year old Laso mix, who he adopted at the shelter.</p></div><!--info-->
</div><!--row-->
                   </div><!--doctor--> 
               <div class="doctor col-lg-4">
                       <div class="row"><div class="photo col-xs-6 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-2 col-md-offset-2 col-lg-4 col-lg-offset-0"><img class="img-circle" src="img/07.jpg" alt="staff"></div><!--photo-->

       <div class="info col-xs-8 col-xs-offset-2 col-sm-7 col-sm-offset-0 col-md-6 col-lg-8"><h3> Angel </h3>
       <p> Angel  is a guardian of Missy, a three year old Laso mix, who he adopted at the shelter.</p></div><!--info-->
</div><!--row-->
                   </div><!--doctor--> 
                   <div class="doctor col-lg-4">
                       <div class="row"><div class="photo col-xs-6 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-2 col-md-offset-2 col-lg-4 col-lg-offset-0"><img class="img-circle" src="img/07.jpg" alt="staff"></div><!--photo-->

       <div class="info col-xs-8 col-xs-offset-2 col-sm-7 col-sm-offset-0 col-md-6 col-lg-8"><h3> Angel </h3>
       <p> Angel  is a guardian of Missy, a three year old Laso mix, who he adopted at the shelter.</p></div><!--info-->
</div><!--row-->
                   </div><!--doctor--> 
                   <div class="doctor col-lg-4">
                       <div class="row"><div class="photo col-xs-6 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-2 col-md-offset-2 col-lg-4 col-lg-offset-0"><img class="img-circle" src="img/07.jpg" alt="staff"></div><!--photo-->

       <div class="info col-xs-8 col-xs-offset-2 col-sm-7 col-sm-offset-0 col-md-6 col-lg-8"><h3> Angel </h3>
       <p> Angel  is a guardian of Missy, a three year old Laso mix, who he adopted at the shelter.</p></div><!--info-->
</div><!--row-->
                   </div><!--doctor-->  
               </div><!--row-->
       </div><!-- Conatiner-->

                   </div><!--staff end-->

           <div class="page" id="testimonial">
               <div class="container-fluid"><h2>Tesimonials</h2>
                   <div class="row"><blockquote class="col-sm-6" id="angel">
               <div class="quote">
                <span class="intro">
                During the summer I saw a beatiful flower growing in the corner of the house.       
            </span>
                   <span class="more">
                   The house was big and the whole world cound see if but they didn't know I am here at the house The house was big and the whole world cound see if but they didn't know I am here at the house Thank you for you.The house was big and the whole world cound see if but they didn't know I am here at the house Thank you for you.The house was big and the whole world cound see if but they didn't know I am here at the house Thank you for you.
                    </span>
                   <span class="customer">Angel </span>
                   </div>

               </blockquote>

               <blockquote class="col-sm-6" id="angels">
               <div class="quote">
                <span class="intro">
                During the summer I saw a beatiful flower growing in the corner of the house.       
            </span>
                   <span class="more">
                   The house was big and the whole world cound see if but they didn't know I am here at the house Thank you for you.The house was big and the whole world cound see if but they didn't know I am here at the house Thank you for you.The house was big and the whole world cound see if but they didn't know I am here at the house Thank you for you.The house was big and the whole world cound see if but they didn't know I am here at the house Thank you for you.The house was big and the whole world cound see if but they didn't know I am here at the house Thank you for you.
                    </span>
                   <span class="customer">Angel </span>
                   </div>



               </blockquote>

                   <blockquote class="col-sm-6" id="angelss">
               <div class="quote">
                <span class="intro">
                During the summer I saw a beatiful flower growing in the corner of the house.       
            </span>
                   <span class="more">
                   The house was big and the whole world cound see if but they didn't know I am here at the house.The house was big and the whole world cound see if but they didn't know I am here at the house Thank you for you.The house was big and the whole world cound see if but they didn't know I am here at the house Thank you for you.The house was big and the whole world cound see if but they didn't know I am here at the house Thank you for you.The house was big and the whole world cound see if but they didn't know I am here at the house Thank you for you.
                    </span>
                   <span class="customer">Angel </span>
                   </div>
                   </div><!--row-->

               </div><!--Container-->

                   </div>
           <!--End of testimonial-->
                   </div><!--Main-->
       <footer>
           <div class="container-fluid">
            <div class="row">
               <div class="col-sm-6">
                <p>Call Us at <span class="phone">601-556-4587</span><p>
                <p> All contecnts &copy; 2016 <a href="www.myS.com">mySUPEa> ALL right reserved.</p>
                </div><!--colums-->

               <div class="col-sm-6">
               <nav class="navbar navbar-default" role="navigation">
           <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Terms of use</a></li>  
               <li><a href="#">Privacy policy</a></li>    
                </ul>
           </nav> 
               </div><!--collums-->
           </div><!--row-->  
            </div><!--conatiner-->

               </footer>



                   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
       <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
                   <script src="js/cool.js"></script>               



    </body>
    </html>

          $(function() {

  "use strict";

  var topoffset = 50;   


$('body').scrollspy({
    target: 'header .navbar',
    offset: topoffset
  });

  // add inbody class
  var hash = $(this).find('li.active a').attr('href');
  if(hash !== '#featured') {
    $('header navbar').addClass('inbody');
  } else {
    $('header navbar').removeClass('inbody');
  }


  // Add an inbody class to nav when scrollspy event fires
  $('.navbar-fixed-top').on('activate.bs.scrollspy', function() {
    var hash = $(this).find('li.active a').attr('href');
    if(hash !== '#featured') {
      $('header nav').addClass('inbody');
    } else {
      $('header nav').removeClass('inbody');
    }
  });

1 Answer

Joel Bardsley
Joel Bardsley
31,258 Points
Joel Bardsley
Joel Bardsley
31,258 Points

I'm not sure if this will fix it, but I've noticed that there's an issue with your jQuery selectors for adding and removing the 'inbody' class. Instead of $('header navbar') I expect you'll either want $('header .navbar') or $('header nav') as it is lower down in the code.