Using jQuery to dynamically update elements as the user scrolls

Looking to dynamically update the position of a div on a webpage as the user scrolls down? Check out this JavaScript script that utilizes a h2 HTML element to display the y-coordinate of the element. To see the script in action, visit the following jsFiddle: http://jsfiddle.net/adnLX/

Here is the script used to display the position:

 $(document).ready(function(){

 $(window).scroll(function(){
    var yCoordinate = $("#bottom").position().top;

     $("#title").html(yCoordinate);
 });
 });

In summary, the goal is to continuously update and display the position of a div as the user scrolls up and down the webpage. Currently, the script only displays the position once when initially scrolled. How can the script be modified to continuously update and display the position dynamically?

Answer №1

Consider focusing on the scrollTop attribute. The placement of #bottom remains constant, so the .top function will always yield the same result.

However, the scroll position is variable. You might want to attempt something along these lines

$(window).scroll(function(){
    var position = $("#bottom").position().top;
    var scrollValue = $('body').scrollTop() - position;
    $("#title").html(scrollValue);
 });

I experimented with this solution in your fiddle, and it appeared to be functioning correctly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to send this form with jQuery AJAX?

I currently have a PHP email form on my website where users enter their email address and receive a link to the file they uploaded. I would like to enhance this by submitting the form using AJAX for a smoother user experience. At the moment, users click o ...

Sending a jQuery variable to a static image source within a Django template

I have a Django view that returns a list of file names (which are .jpg images) as an Ajax response. My goal is to append each image to a div with the id grid. Here's my code: success: function(response) { var state = response.state; var piclist = ...

Preventing users from selecting past dates in HTML input date field

I need help with disabling past dates in an HTML date input field. Even though I am able to restrict selecting past dates on the date picker, I can still save data if I manually type in a previous date (e.g., 12/08/2020). $(document).ready(function() { ...

Extension for Chrome that switches between active and inactive modes

I have been attempting to create an extension that can toggle the functionality of another specific extension on and off. Despite numerous attempts, I have not been able to find a solution that works effectively. Essentially, my extension displays a popup ...

Save form data as a serialized post within a colorbox

I'm currently facing an issue with serializing form data from a form within color-box. While I am able to submit the form, the form data doesn't seem to be included. Below is the script I have been using in an attempt to retrieve the form data: ...

Dynamic banner featuring animated text, automatically resizing divs based on width while maintaining body width

Currently, I am working on creating a banner with moving text. While I have managed to come up with a solution for implementing this effect, there are two significant issues that I am facing. The width values in pixels need to be manually adjusted based ...

When using margin-right and a width of 100% in the WordPress backend, a scrollbar may be triggered

I have been working on developing a configuration page for my WordPress plugin. In order to display the content, I included an <ul> element inside a <div> container and added it to the configuration page. However, I encountered an issue where a ...

Twitter Typeahead Bloodhound: Retrieve the current search query within the sorting function

I'm currently working on a feature that involves sorting suggestions based on the position of the search string within the data-fields. For example, if someone types 'ar', suggestion A:'how are you' should be prioritized over B:&ap ...

How can I generate a checkbox in a database with a field that allows for enabling and disabling?

I am looking to design a table that includes questions, checkboxes, and text boxes. All the questions are stored in a database and called through an array. In addition, I want to create disabled textboxes that become enabled when their corresponding checkb ...

Is PHP not being called by AJAX?

Could someone please assist me in identifying where I am going wrong? My goal is to make a PHP call when a selected value is changed. The code is not displaying the information from the PHP file. JQUERY CODE // Skill sort on change $('#order_by&apo ...

Modify the static navigation menu to a dynamic menu in Wordpress

Currently, I am attempting to transform my static navigation menu into a dynamic WordPress navigation menu. This is the code that I currently have: <nav> <ul id="menu"> <?php $pages = array( 'in ...

I am struggling to make my table adapt to different screen sizes and become

Here is an example of a table: <TABLE class=vysledky > <TR class=podtrzeni> <TD width="39" height="19">Order <br /> League</TD> <TD width="39" height="19">Order <br /> Team</TD> <TD width="3 ...

Connecting a CSS file with an HTML document

Having an issue with my CSS. For instance, here is a snippet from my CSS file .readmore { font-style: italic; text-decoration: none; color: #509743; padding-left: 15px; background: url(../images/more.png) no-repeat 0 50%; } .readmore: ...

jQuery functions are malfunctioning on Firefox, yet they are functioning properly on Chrome

Hey guys, can you take a look at this website using both Firefox and Chrome? I've noticed that jQuery doesn't seem to be working properly on Firefox. Any ideas why? ...

What is causing this code to break when using ajax's `data` parameter?

I'm relatively new to JavaScript, and I've been working on some code that seems to be properly formatted. However, whenever I add the data elements, it breaks the code. I've checked the jQuery documentation and as far as I can tell, I'm ...

Having trouble with jQuery input radio not functioning upon clicking?

Can you help me with a script that clears the value of input id "price" and disables it when I click on radio button id "meta_price_type_0", "meta_price_type_1", or "meta_price_type_2"? <input id="price" type="text" name="price" value="200" > &l ...

SQL/PHP challenge: Trouble updating a record

As a newcomer to PHP, I apologize if my question is basic. I am attempting to update a record using PHP / SQL. Despite researching the error message online, I cannot pinpoint the issue within my code: An error occurred: SQLSTATE[HY093]: Invalid paramet ...

Troubleshooting: jQuery animation for background-color doesn't function in Internet Explorer

I've been working on a website and I'm trying to create a navigation bar similar to the one found at . My goal is to have the navbar transition from transparent to a colored background as the user scrolls down the page. For this project, I am ut ...

Disabling 'Input Number' feature is ineffective in Firefox browser

Is there a way to prevent the input value from changing when the up or down arrow is held, even if the input is disabled? I want to retain the arrows without allowing this behavior on Firefox. Give it a try: Press the up arrow. After 5 seconds, the input ...

What might be causing the status problem to not display correctly?

My toggle feature to switch between no issue and issue is not displaying the status correctly. Despite trying to troubleshoot, I can't figure out why the issue section is not showing up. <!DOCTYPE html> <html> <script src="https://aj ...