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 Introduction to jQuery Events Event Types

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Posted by Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Having some trouble understanding the scroll() method

Hi!

I'm having a bit of trouble getting the scroll method in jQuery to work.

Using the project example I;m trying to get the text of the "location" text to append when the whole browser window is scrolled. I know it's a messy thing to try but I just want to prove that I can do it. There's no error in the script. Thanks.

$('body').on("scroll", function(){ 
    $('.loc').append("<strong>Location:</strong> Your house?!");
});  /**/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Treehouse Pet Adoption</title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <link href="https://fonts.googleapis.com/css?family=Bree+Serif|Open+Sans:400,700" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <nav class="container">
      <h1 class="logo"><img src="images/logo.svg" /></h1>
      <ul>
        <li><a href="index.html">Adopt</a></li>
        <li><a href="post.html">Post</a></li>
      </ul>
    </nav>
  </header>
  <h2 class="page-header">These puppies want to find their furever homes!</h2>
  <main class="container adoptable">
    <div class="row">
      <section class="six columns">
        <div class="card">
          <img src="images/puppy1.jpg" alt="french bulldog puppy">
          <p>
            <strong>Name:</strong> Florence
          </p>
          <p class="loc">
            <strong>Location:</strong> Treehouse Adoption Center
          </p>
          <p>
            <strong>Notes:</strong> Great at rubber duck debugging!
          </p>
          <button class="full">Adopt!</button>
        </div>
      </section>
      <section class="six columns">
        <div class="card">
          <img src="images/puppy2.jpg" alt="french bulldog puppy">
          <p>
            <strong>Name:</strong> Henrietta
          </p>
          <p class="loc">
            <strong>Location:</strong> Treehouse Adoption Center
          </p>
          <p>
            <strong>Notes:</strong> Gets a little frisky around Easter candy.
          </p>
          <button class="full">Adopt!</button>
        </div>
      </section>
    </div>
    <div class="row">
      <section class="six columns">
        <div class="card">
          <img src="images/puppy3.jpg" alt="french bulldog puppy">
          <p>
            <strong>Name:</strong> Jerry
          </p>
          <p class="loc">
            <strong>Location:</strong> Treehouse Adoption Center
          </p>
          <p>
            <strong>Notes:</strong> Can use his ears as wings.
          </p>
          <button class="full">Adopt!</button>
        </div>
      </section>
      <section class="six columns">
        <div class="card">
          <img src="images/puppy4.jpg" alt="french bulldog puppy">
          <p>
            <strong>Name:</strong> Norma
          </p>
          <p class="loc">
            <strong>Location:</strong> Treehouse Adoption Center
          </p>
          <p>
            <strong>Notes:</strong> Loves a good bath.
          </p>
          <button class="full">Adopt!</button>
        </div>
      </section>
    </div>
  </main>
  <footer>
    <p class="container">
      Made with &lt;3 fur puppies by <a href="#">Aisha Blake</a>
    </p>
  </footer>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

1 Answer

egaratkaoroprat
egaratkaoroprat
16,630 Points

Hey Jonathan

You need to bind it to the window object instead of the body. Because the body isn't scrolling, that's why you can't use scroll event listener on it.

Egarat

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Excellent, thanks for your help. I tried adding window as the jquery selector and nothing happened. turned out I'd accidentally removed the . as the class selector for .loc ;)