Scroll Events - Exercise

Contact Us or call 1-877-932-8228
Scroll Events - Exercise

Scroll Events

Duration: 10 to 15 minutes.

Nan & Bob have asked us to spice up the home page of their new site with a photo background - but they think the text is hard to read when scrolling, so the photo background needs to go away when the user is scrolling the longish content.

  1. Open Events/Exercises/scroll.html in a file editor.
  2. Add a class and an id to the div data-role="content" in the #home page - you'll use the class for formatting (see the photo-background CSS, already written for you) and the id to reference the div when handling scroll events.
  3. Write jQuery code to remove the background image when the user scrolls and replace it when the user stops scrolling.
  4. The result should look as below, with the left screenshot showing the home page just after page load, and the right screenshot showing the view when scrolling: scroll exercise screenshot
  5. Test your work from a mobile device.



See Chris Coyier's excellent article (from which we fashioned the CSS for the bookstore background image in this exercise) for more info on stretching background images.

Adding class bookstorebg to the home page content div allow us to style it, initially, with the CSS class already written. We add id homecontent to the home page content, too, so that we can reference the element in the event handler.

We add JavaScript rules - using scrollstart and scrollstop - to add and remove the class from the div in response to user scrolling.