jQuery Technique: Fix Web Page Content To Top Of Viewport Upon Scrolling

Last reviewed/updated: 21 Apr 2019 | Published: 04 Nov 2015 | Status: Active

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, and nav 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., like div with style display: block), others as inline elements (i.e., like span with style display: 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 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.
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 the header, nav, and footer 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, and right: 0 styles. The bottom: 0 style pins the box to the bottom of the viewport. The left: 0 and right: 0 styles stretch the box horizontally to fill the entire width of the viewport.
- To fill the entire width of the viewport, left: 0 and right: 0 can be replaced with width: 100%.
- To fix the position of content, there is no need to use the z-index property.
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 boolean true 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 boolean false value.
Line 4. Executes each time the line 3 expression evaluates to the boolean true value. Where the class attribute does not exist on nav elements on the DOM, adds the class="fixed" attribute to those nav elements on the DOM. Where the class attribute exists on nav elements on the DOM without the fixed value, adds the fixed value to the class attribute for those nav elements on the DOM. Where the class attribute exists on nav elements on the DOM with the fixed value, does nothing.
Line 6. Executes each time the line 3 expression evaluates to the boolean false value. Where the class attribute does not exist on nav elements on the DOM, does nothing. Where the class attribute exists on nav elements on the DOM without the fixed value, does nothing. Where the class attribute exists on nav elements on the DOM with the fixed value, removes the fixed value from the class attribute for those nav elements on the DOM.