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

JavaScript Using jQuery Plugins Add a Sticky Navigation Bar Understanding Plugin Events

Posted by Susan Rusie
Susan Rusie
10,671 Points

What do I need to be able to scroll up and down on the home page?

I noticed in the video that Dave was able to scroll up and down on the home page. It works for the team and work.html, but not the index.html. Is there something I am leaving out for this to work? Other than that, everything else works just fine. Here is my index.html code:

<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Agency - A Treehouse template</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--CSS-->
        <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="js/animsition/animsition.min.css">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <div class="row container animsition">
        <header class="row header">
          <div class="grid-third">
            <a href="index.html" class="logo animsition-link"></a>
          </div>
          <div class="grid-third">
            <h1 class="description">We build apps</h1>
          </div>
          <div class="grid-third">
            <nav>
              <a href="#" class="active animsition-link">Home</a>
              <a href="work.html" class="animsition-link">Work</a>
              <a href="team.html" class="animsition-link">Team</a>
            </nav>
          </div>
      </header><!--/header-->
        <div class="row">
          <div class="grid-full">

          </div>
          <div class="main row">
            <div class="grid-third">
              <img src="img/sticker-team.png" alt="" />
              <p>United we stand divided we fail.  Meet the all star team behind the agency.</p>
              <a href="team.html" class="button">Meet the Team</a>
            </div><!--/team-->
            <div class="grid-third">
              <img src="img/sticker-work.png" alt="" />
              <p>Check our latest app builds or download them in the App Store.</p>
              <a href="work.html" class="button">Latest Projects</a>
            </div><!--/work-->
            <div class="grid-third">
              <img src="img/sticker-contact.png" alt="" />
              <p>Have questions or requests?  Feel free to contact us, we’d love hear from you.</p>
              <a href="#" class="button">Contact Us</a>
            </div><!--/contact-->
          </div>
        </div><!--/main-->
        <footer>
          <div class="row">
            <div class="grid-full">
              <p>Connect with us</p>
              <ul class="social">
                <li>
                  <a href="#" class="pink"></a>
                  <a href="#" class="light-blue"></a>
                  <a href="#" class="dark-blue"></a>
                </li>
              </ul>
            </div>
          </div>
        </footer><!--/footer-->
        </div>
      <script src="js/jquery-1.11.2.min.js"></script>
      <script src="js/animsition/jquery.animsition.min.js"></script>
      <script src="js/sticky/jquery.sticky.js"></script>
      <script src="js/main.js"></script>
    </body>
</html>
Steven Parker
Steven Parker
229,786 Points
Steven Parker
Steven Parker
229,786 Points

The HTML alone is often not enough to illustrate the issue, particularly when images are involved.

To share the entire project, you can make a snapshot of the workspace and provide the link.

2 Answers

Eric Thompson
Eric Thompson
9,858 Points
Eric Thompson
Eric Thompson
9,858 Points

Susan, honestly there is not enough content on the page for it to warrant scrolling. Notice that the scroll bar does not appear on the home page on the right (unless you shrink down to mobile view). The other two pages have enough content to make the scroll bar appear.

Hope this helps!

Jeremy Castanza
Jeremy Castanza
12,081 Points
Jeremy Castanza
Jeremy Castanza
12,081 Points

I think Eric is hitting the nail on the head with this project. To test this theory out, just throw a bunch of lorem ipsum into a paragraph tag and place it on the index.html page. If you notice that it starts working, it's just an issue of having enough content on the page to warrant scrolling. Best of luck!

Jon Kealy
Jon Kealy
9,082 Points
Jon Kealy
Jon Kealy
9,082 Points

I second what Eric is saying. My work around is simply to test it on the "Team" and "Work" pages as these provide enough content to scroll. Hope this helps.