jQuery Technique: Fix Web Page Content To Top Of Viewport Upon Scrolling
1. Introduction
Fixing web page content to the top of the viewport upon scrolling with jQuery is a technique for dynamically fixing/unfixing content to the top of the viewport upon scrolling down/up the web page. When initially scrolling down the web page, all of the content moves up the viewport in unison as normal. However, when the content to be fixed to the top of the viewport reaches the top of the viewport, it is removed from the normal flow of content, it is fixed to the top of the viewport, and it remains fixed to the top of the viewport as scrolling down continues. Then, when scrolling up the web page, the reverse occurs and the fixed content is returned to the normal flow of content. Dynamically fixing/unfixing content to the top of the viewport upon scrolling down/up the web page requires:
- Getting the number of pixels that are being scrolled off the top of the viewport. Cross web browser, this is not straight forward using JavaScript. Therefore, the jQuery
$(window).scrollTop()
method is used. - Setting the number of pixels from the top of the web page to the top of the content to be fixed. This is simple CSS.
- Setting the height of the content to be fixed. This is simple CSS.
Some notes on this example:
- The new HTML 5 semantic
header
,main
,footer
, andnav
elements are used. Support for these elements is different cross-browser. Moreover, the user agent styles for some web browsers style some of these elements as block-level elements (i.e., likediv
with styledisplay: block
), others as inline elements (i.e., likespan
with styledisplay: inline
), and this changes over time. - The
header
element encloses (i.e., wraps) two subsections:- The
<div class="header-not-nav"></div>
section (a.k.a., header-not-nav). The header-not-nav content always scrolls with the web page. This content could be, for example, the web site logo/title/social media links/etc. - The
<nav></nav>
section (a.k.a., nav). The nav content becomes fixed/unfixed to the top of the viewport upon scrolling down/up the web page. This content could be, for example, the web site navigation bar/etc.
- The
- The normal flow of content is; 1.) header-not-nav, 2.) nav, 3.) main, 4.) footer. When the nav is fixed to the top of the viewport, the normal flow of content becomes; 1.) header-not-nav, 2.) main, 3.) footer.
- When the demonstration web page is displayed:
- If the viewport height is less than or equal to the height of the main plus footer (the lesser the better), the vertical scrollbar appears and it will be able to scroll down far enough to demonstrate the technique.
- If the viewport height is greater than the height of the main plus footer, and less than the height of the header plus main plus footer, the vertical scrollbar appears but it will not be able to scroll down far enough to demonstrate the technique.
- If the viewport height is greater than or equal to the height of the header plus main plus footer, there is no vertical scrollbar.
1.1. Demonstration
Demonstration: jQuery Technique: Fix Web Page Content To Top Of Viewport Upon Scrolling (learnwebcoding.com)
1.2. Web Browser Support
Web browser support: IE9+, ED12+, FF6+, SF5+, CH5+, OP12.10+.
1.3. jQuery Support
jQuery support: jQuery Core 1.7+, 2+, 3+.
1.4. How To Try This Example On Your Computer
To try this example on your computer:
- Download the following source files to the same drive or folder on your computer:
- Double click the .html file.
1.5. Abbreviations
- IE = Internet Explorer.
- ED = Edge Legacy 12 - 18 (EdgeHTML based) and Edge 79+ (Chromium based).
- FF = Firefox.
- SF = Safari.
- CH = Chrome.
- OP = Opera.
2. Fix Web Page Content To The Top Of The Viewport Upon Scrolling
2.1. HTML Source Code And Notes
HTML source code: fix_content_top_viewport_upon_scrolling.html (learnwebcoding.com):
<!DOCTYPE html> <html lang="en"> <head> <title>jQuery Technique: Fix Web Page Content To Top Of Viewport Upon Scrolling Demonstration/HTML Source Code</title> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="fix_content_top_viewport_upon_scrolling.css" /> <script src="https://code.jquery.com/jquery-1.7.0.js"></script> <script src="fix_content_top_viewport_upon_scrolling.js"></script> </head> <body> <header> <div class="header-not-nav"> <h2>jQuery Technique: Fix Web Page Content To Top Of Viewport Upon Scrolling Demonstration/HTML Source Code</h2> <h4>This example uses jQuery and requires an Internet connection.</h4> .header-not-nav </div> <nav> <h4>Becomes fixed to top of viewport upon scrolling down.</h4> nav </nav> </header> <main>main 1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br />43<br />44<br />45<br />46<br />47<br />48<br />49<br />50</main> <footer>footer 1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />Web browser support: IE9+, ED12+, FF6+, SF5+, CH5+, OP12.10+.<br />jQuery support: jQuery Core 1.7+, 2+, 3+.</footer> </body> </html>
HTML source code notes:
- Lines 11 - 21: The
<header></header>
section. The<header>
element wraps the content from the top of the web page to the bottom of the content to be fixed. Has two subsections:- Lines 12 - 16: The
<div class="header-not-nav"></div>
section. The content of this header subsection always scrolls with the web page. - Lines 17 - 20: The
<nav></nav>
section. The content of this header subsection becomes fixed/unfixed to the top of the viewport upon scrolling down/up the web page.
- Lines 12 - 16: The
- Line 22: The
<main></main>
section. - Line 23: The
<footer></footer>
section.
2.2. CSS Source Code And Notes
CSS source code: fix_content_top_viewport_upon_scrolling.css (learnwebcoding.com):
* { text-align: center; margin: 0; } main { display: block; } header { height: 150px; } .header-not-nav { height: 100px; background-color: #fcc; } nav { height: 50px; background-color: #000; color: #fff; } .fixed { position: fixed; top: 0; left: 0; right: 0; } main { background-color: #cfc; } footer { background-color: #ccf; }
CSS source code notes:
- Lines 1 - 7: A CSS reset/normalize for this example. In particular, lines 5 - 7 force web browsers to style the
main
element as a block-element, which is identical to the user agent styles for theheader
,nav
, andfooter
elements in the supported web browsers (i.e., IE9+, ED12+, FF4+, SF5+, CH5+, OP11.60+). - Lines 8 - 10: Styles the header. The header encloses (i.e., wraps) two subsections: 1.) header-not-nav, which always scrolls with the web page; and 2.) nav, which becomes fixed/unfixed to the top of the viewport upon scrolling down/up the web page.
- Lines 9: Sets the height of the header. Required. Stops the nav from obscuring the top of the main when the nav is fixed to the top of the viewport.
When the nav reaches the top of the viewport, it is removed from the normal flow of content, it is fixed to the top of the viewport, and the main becomes the next content in the flow of content after the header-not-nav. Because when the nav reaches the top of the viewport it is fixed in place to the top of the viewport, it obscures the top 50 pixels (the height of the nav) of the next content in the flow of content after the header-not-nav, which is the main. Explicitly setting the height of the header stops the nav from obscuring the top of the main when the nav is fixed to the top of the viewport.
- Lines 11 - 14: Styles the header-not-nav.
- Line 12: Sets the height of the header-not-nav. Required. In this example, the height of the header-not-nav corresponds to the number of pixels from the top of the web page to the top of the content to be fixed.
- Lines 15 - 19: Styles the nav.
- Line 16: Sets the height of the nav. Required. In this example, the height of the nav corresponds to the height of the content to be fixed.
- Lines 20 - 25: Removes a box from the normal flow of content and fixes its position according to the
top: 0
,left: 0
, andright: 0
styles. Thebottom: 0
style pins the box to the bottom of the viewport. Theleft: 0
andright: 0
styles stretch the box horizontally to fill the entire width of the viewport.- To fill the entire width of the viewport,
left: 0
andright: 0
can be replaced withwidth: 100%
. - To fix the position of content, there is no need to use the
z-index
property.
- To fill the entire width of the viewport,
- Lines 26 - 28: Styles the main.
- Lines 29 - 31: Styles the footer.
2.3. jQuery Source Code And Notes
jQuery source code: fix_content_top_viewport_upon_scrolling.js (learnwebcoding.com):
$(document).ready(function(){ $(window).on("scroll", function(){ if ($(window).scrollTop() >= 100){ $("nav").addClass("fixed"); } else { $("nav").removeClass("fixed"); } }); });
jQuery source code notes:
- Line 1: Runs an anonymous function when the web browser has fully generated the DOM (i.e., when the DOM is ready for monitoring/manipulation).
- Line 2: Attaches an event handler (in this example, an anonymous function) to the scroll event on the
window
object. - Lines 3 - 7: Compares the number of pixels that are being scrolled off the top of the viewport to the number of pixels from the top of the web page to the top of the content to be fixed, and, depending upon the result of the comparison, either maintains or changes the style of the nav.
- Line 3: The
$(window).scrollTop()
method gets the number of pixels that are being scrolled off the top of the viewport. - Line 3: The
100
value is the number of pixels from the top of the web page to the top of the content to be fixed. - Line 3: The
($(window).scrollTop() >= 100)
expression compares the number of pixels that are being scrolled off the top of the viewport (varies with scrolling) to the number of pixels from the top of the web page to the top of the content to be fixed (100). In this example, if the number of pixels that are being scrolled off the top of the viewport is greater than or equal to 100, then the expression evaluates to the booleantrue
value. If the number of pixels that are being scrolled off the top of the viewport is not greater than or equal to 100, then the expression evaluates to the booleanfalse
value. - Line 4. Executes each time the line 3 expression evaluates to the boolean
true
value. Where theclass
attribute does not exist onnav
elements on the DOM, adds theclass="fixed"
attribute to thosenav
elements on the DOM. Where theclass
attribute exists onnav
elements on the DOM without thefixed
value, adds thefixed
value to theclass
attribute for thosenav
elements on the DOM. Where theclass
attribute exists onnav
elements on the DOM with thefixed
value, does nothing. - Line 6. Executes each time the line 3 expression evaluates to the boolean
false
value. Where theclass
attribute does not exist onnav
elements on the DOM, does nothing. Where theclass
attribute exists onnav
elements on the DOM without thefixed
value, does nothing. Where theclass
attribute exists onnav
elements on the DOM with thefixed
value, removes thefixed
value from theclass
attribute for thosenav
elements on the DOM.
3. Resources And Additional Information
- Reset CSS (meyerweb.com)
- normalize.css (necolas.github.io)
- jQuery (jquery.com)
- jQuery API (api.jquery.com)
- Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification: W3C Recommendation 07 June 2011, Edited In Place 17 December 2014 To Point To New Work (w3.org)
- CSS Positioned Layout Module Level 3: W3C Working Draft 03 February 2015 (w3.org)
- jQuery Techniques (learnwebcoding.com)