• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / jQuery / Get the Window Scroll Position Using jQuery

Get the Window Scroll Position Using jQuery

January 21, 2022 Leave a Comment

While scrolling a webpage, we can use jQuery to get the scroll position of the top of the window using the scrollTop() method.

$(window).scrollTop();

The scrollTop() method will return the top position of the element it is called on. In this case, we use it on the window object so it will return the top position of the screen. If we have not scrolled at all, it will return 0, since that means we are at the top of the page.

Getting the Scroll Position While Scrolling a Webpage

In this example, we will get and show the current scroll position as we scroll this page. To make sure this page is large enough to have to scroll on, we will create a very tall div. Here is the html:

<style>#div1 { height: 4000px; width:300px; border: 1px solid #444; position: relative; } #scrolling-div { position: absolute; top: 10px; margin-left: 10px; }</style>
<div id="div1">
  <div id="scrolling-div">The scrollTop position is: <span id="scroll-number"></span></div>
</div>

We will use the jQuery scroll() method on the window object to launch a function while we scroll the page. Every time the function is called, we will use the scrollTop() method on the window object again to get the top position of the window.

Finally, we will use the jQuery text() method to display the number as we scroll.

Here is the code:

$(window).scroll(function(){
  
  $("#scroll-number").text($(window).scrollTop());
  
  //The code below is to make sure the #scrolling-div stays in view of the user as they scroll 
  if ($(window).scrollTop() > $("#div1").position().top && $(window).scrollTop() < ($("#div1").position().top + 4000)){
    $("#scrolling-div").css("position","fixed");
  } else {
    $("#scrolling-div").css("position","absolute");    
  }
});

The final code and output for this example is below:

Code Output:

The scrollTop position is:

Full Code:

<style>#div1 { height: 4000px; width:300px; border: 1px solid #444; position: relative; } #scrolling-div { position: absolute; top: 10px; margin-left: 10px; }</style>
<div id="div1">
  <div id="scrolling-div">The scrollTop position is: <span id="scroll-number"></span></div>
</div>

<script>

$(window).scroll(function(){
  $("#scroll-number").text($(window).scrollTop());
  //The code below is to make sure the #scrolling-div stays in view of the user as they scroll 
  if ($(window).scrollTop() > $("#div1").position().top && $(window).scrollTop() < ($("#div1").position().top + 4000)){
    $("#scrolling-div").css("position","fixed");
  } else {
    $("#scrolling-div").css("position","absolute");    
  }
});

</script>

Hopefully this article has helped you understand how to get the scroll position using jQuery.

Other Articles You'll Also Like:

  • 1.  Using jQuery to Change the Text Color of a Paragraph
  • 2.  How to Use jQuery to Animate the Font Size of a Paragraph
  • 3.  jQuery Random Number Generator Between Two Numbers
  • 4.  jQuery focusout – How to Use the focusout() Method on an HTML Form
  • 5.  How to Set All Checkbox to Checked in jQuery
  • 6.  Sort List of Divs with Data Attribute with Radio Buttons Using Javascript
  • 7.  Using jQuery to Remove All Options From Select
  • 8.  Using jQuery to Get the Position of Element
  • 9.  Using jQuery to Change Image src
  • 10.  jQuery append – Insert Element at End of Another Element

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy