This lesson shows how to make content appear or disappear when a user scrolls to a specific position on a web page. It was inspired by a compelling New York Times documentary titled “Snowfall” that used the technique to good effect. The concept that supports this technique is fairly simple. Whenever you scroll through an html document, the browser keeps track of your scrolling position. Jquery can use this information to implement events in the document- ie. make things happen- when a specific scroll point is reached. In this case we are simply making div tags appear and disappear but ANY jquery event can be tied to scrolling position, which means that it can be used to spark animations, change page color, start or stop videos, etc.
1. Download scrolltop.zip from free.mynmi.net. Unzip it and open scrolltop.html in your browser.
2. Scroll down until The Arches heading is at the top of your browser’s window. At this point a picture of the arches should automatically appear. As you continue to scroll (in either direction) the picture should disappear. Play around a bit to make it appear, disappear, appear, etc. Also notice that the map of North Campus on the right side always stays at the top of the page, and the number (also at right) that tells you how far you have scrolled. When you get to 301, the Arches should appear, and disappear when you exceed 650.
3. Now that you have seen the effect, it’s time to learn how it works. Open scrolltop.html with your code editor and look at the html source code. Near the bottom of the document, you should see the arch div tag [footnote] beginning with <div id=”arch”>[/footnote] that holds the picture of the arches, along with a list of several other div tags. Now click on scroll.css , look at the CSS for the arch id and take note that the display is set to ‘none’, as in display: none; . This characteristic, means that the div tag is invisible until jquery tells it otherwise.
4. Click on scroll.js and look at the code that supports this magic. The code starts with the document.ready function which means that nothing takes place until the entire document is loaded.
5. Just below document.ready you will see the $(document).scroll(function() which activates whenever scrolling occurs.
6. As scrolling occurs, the next line: var top = $(document).scrollTop(); generates a numeric variable (named top) based on whatever the scroll position is at any given moment. Just below, $(‘#tellme’).html(top); sets the content of the tellme div tag to whatever the ‘top’ variable is so that you can see it.
7. Moving along, $(‘#uga’).css({‘top’: top }) changes the top value of #uga to match the scroll position, which is tied to the ‘top’ variable that we looked at in the previous step. In other words, this line is the reason that the map of North campus is always at the top of the document.
8. The line if (top > 300) {$(‘#arch’).show() causes the #arch div with the picture of the Arches to appear if the scrolling position exceeds 300px.
9. The next two lines hide the #arch div when scrolling is less than 300 or greater than 650px.
10. Now it is time to try this yourself. Reopen scroll.css and you will find Id’s for other features of North Campus: The library, stadium, Grady College, and the Geography building. These Id’s have already been constructed for you and, just like the Arch Id, are set to display: none, which makes them invisible until jquery reveals them.
11. In code view, scroll to the bottom of your document. There you should find the uga div tag (the one with the map) that also contains the tellme div tag (that tracks scroll position) and the arch div tag.
Create 4 new div tags within the uga div tag and attach the library, stadium, grady, and geography ids to them. When you are done, compare your work to the screen capture below.
12. Before you go any further, preview the document in your browser again. Notice that the Library heading on the left (ie. the words: The Library), makes it way to the top of your document just after the picture of the Arch disappears. More importantly, take note of the number that appears on the right side of the document that indicates scrolling position. That is the number that you want to use to make the library div tag appear. If you are using normal zoom settings with your browser, that number should be in the vicinity of 720.
13. Open scroll.js and find the three lines of code shown at right that causes the arch id to appear and disappear based on scrolling position.
Copy and paste those 3 lines and modify them so that they refer to the library id instead of the arch id. Next, change the first line to if (top >720) instead of > 300, the second line to <720, and the final line to >1100. When you are done, the second 3 lines should look like the screen capture shown below. Preview, the document in your browser to see if it works properly. If the library appears and disappears on cue, proceed to the next step.
14. By now you should have a pretty good idea of how this technique works, so your job is to finish the rest of the tour. Take a look at the html portion of your document in the wysiwyg view. Scroll down a couple of paragraphs of text past the Library heading and add a new heading for Grady College. Save the document, preview it, and take note of the scroll position number that appears when Grady College is at or near the top of your browser window. Open scroll.js, copy and paste the same 3 lines of code again, and modify them to make the grady id appear and disappear at the appropriate scroll position.
15. Once everything works properly for Grady College, repeat the previous step for the stadium and the Geography building.