1. Scrolling Down vs. Multiple Pages
Long Page
Scrolling Down vs. Multiple Pages

2. ViewPort
Viewport = the active port through which viewing your page – i.e. the browser window
Can be resized while person viewing your site
Use dimensions of the viewport to size elements

3. A New Units Related to viewport
vh: viewport height
vw: viewport width
Value is a number representing % of viewport
Example:
Div’s height is 20% of the viewport height

4. Navigation on the side

5. HTML

6. Build the Framework 1st Don’t worry about content
Make every div (or other page divider element) a different color so you can easily see them

7. Body Structure Navigation with Links to Bookmarks based on div ID’s
1 big div around all other page content
Each div will be a separate panel that takes up full height of screen

8. CSS

9. body

10. Only take up left 20% of page width
Navigation
Only take up left 20% of page width
Keeps it in place at top left of screen even when other content scrolls

11. #wrap – outer div around other content
So doesn’t ever overlap the navigation
Takes up 80% (right) of screen width

12. All 3 have this class – will take up full height of viewport (100%)
Panel Div’s
All 3 have this class – will take up full height of viewport (100%)
Set to different colors so can easily see their edges while working on them

13. Navigation on Top: Only Changes shown
It would be much better if these links were styled to make them go ACROSS the top instead of down in a list…but we’ll leave that for you to figure out

14. navigation Stretch across full viewport Height is top 10% of viewport
Still want to keep it in place while scrolling happens

15. No longer needs width restricted
#wrap – outer div
No longer needs width restricted

16. .panel Stretch across full height of viewport
Keep content out of way of top 10% of viewport so nav doesn’t hide it

17. Once you have everything in place, you can style it to actually look good!

18. The Fancy Stuff
Animated Scrolling

19. A Tiny Piece of Script made of jQuery, a JavaScript library, to make the page animate the scrolling when links in your nav are clicked Place it in the head section

20. A version of this you can copy and paste is on the next page

21. <script src="https://ajax. googleapis. com/ajax/libs/jquery/2. 1
$(document).ready(function () {
$("a").click(function (event) {
event.preventDefault();
var targetID = $(this).attr('href');
$('html,body').animate({
scrollTop: $(targetID).offset().top
}, 1000, 'swing');
});
</script>