Keep the div element steady as you scroll to the bottom

Currently, I have a collapsible side navigation whose height is unknown, with a div underneath it. The goal is for the div to change its position to 'fixed' when scrolled to its bottom.

I have successfully achieved this functionality; however, I am facing an issue where when I scroll back to the top, the div remains fixed. I am struggling to find a solution to make it return to a 'static' position at its original point, as I do not know the exact location.

If you would like to see my approach, you can check out this fiddle: https://jsfiddle.net/1krLnv7q/2/.

Any assistance or guidance would be greatly appreciated as I am currently stuck.

javascriptjqueryhtmlcss

Answer №1

UPDATE

To ensure smooth animation, it is recommended to declare your variables outside of the scroll() function.

Check out this example

$(function(){
    // Define top offset of static/fixed div
    var staticOffset = $('.static').offset().top;
    // Record window height
    var wpHeight = $(window).height();

    // Determine point when user scrolls to bottom of div
    // Calculation: static/fixed div height + top offset - viewport height
    var threshold = staticOffset + $('.static').height() - wpHeight;

    $(window).scroll(function(){   
        // If user scrolls below div's bottom (threshold), make it fixed
        if ($(window).scrollTop() > threshold){
            $('.static').addClass('fix');       
        } else {
            $('.static').removeClass('fix');      
        }
    });
});

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

The background gently fades away, directing all attention to the popup form/element

After extensive searching, I have yet to find a straightforward solution that seems to be a standard practice on the web. My goal is to create a form that appears in the center of the screen when a button is clicked using CSS or jQuery. I would like the ...

javascriptjquerycss

I encountered an error while trying to deploy my next.js project on Vercel - it seems that the module 'react-icons/Fa' cannot be found, along with

I'm currently in the process of deploying my Next.js TypeScript project on Vercel, but I've encountered an error. Can someone please help me with fixing this bug? Should I try running "npm run build" and then push the changes to GitHub again? Tha ...

javascriptreactjstypescriptnext.jsvercel

Prioritize loading CMS content before mounting the React component

I am facing a challenge with importing my post from ButterCMS to React due to the async issue. import React, { useState } from "react" import Butter from "buttercms" import gradient from "../../images/TealLove.jpg" export default () => { const butt ...

javascriptreactjsasynchronousgatsby

The JQuery JavaScript function fails to complete its execution

Question: How can I resolve the issue where my PHP file returns a large JSON string with approximately 2000 elements, each having 14 child elements? When using jQuery AJAX to fetch the JSON and populate an ID-identified table, the filling process stops mid ...

javascriptphpjqueryajaxjson

Reducing div size when clicked - Using JQuery version 1.9

I am looking to make a specific div shrink in size, while keeping all the data visible, each time a user clicks on a certain icon with the class legend-icon. For example, I want the div with the ID #Chart to shrink when clicked. This is the HTML code: &l ...

javascriptjquerycssjquery-animate

End the Jquery.ajax connection

Is there a way to include a close button in this popup that can be used when clicking on Continue Shopping? The HTML code is as follows: <div id="notification"></div> The modified HTML code after the function call: <div id="notification" ...

jqueryajax

Passing data from client to express.js using Javascript

I'm having trouble sending a variable from a JavaScript application to a Node.js server. Here's the code snippet: //client side $.get('http://smart-shopper.ro/messages?from=lastGeneralTimeStamp', datas => { console.log("dat ...

javascriptnode.jsexpress

Issues with AJAX functionality in Django causing server to return 500 error

I am encountering a problem while attempting to make an AJAX request from my template. The request is supposed to take me to a URL and execute the view function. Unfortunately, I keep getting a 500 Error in my console. The error message in my Django log re ...

jquerydjangoajaxdjango-views

``Fixing the focus background color for mobile devices and iPads using React and Material io: A Step-by-Step

My custom button has a background and a :hover color. It works fine on the web, but on mobile devices, the color of the :hover persists even after clicking the button when the mouse is not over it. I am looking for a solution to fix this issue because the ...

cssreactjsmaterial-ui

Disabling the .hover function temporarily

I am currently exploring how to temporarily disable the .hover function in jQuery based on a specific event that occurs on the page. You can view my current jsfiddle here: http://jsfiddle.net/4vhajam3/3/ (please note that I have omitted some code for simp ...

javascriptjqueryhtml

What steps should I follow to obtain code coverage data in my Aurelia application with the help of karma?

After creating my Aurelia app using the Aurelia CLI (au new), I wanted to set up code coverage, preferably with karma-coverage, but was open to other options as well. First, I ran npm install karma-coverage --save-dev and then copied the test.js task over ...

javascriptcode-coveragekarma-coverageaurelia

When resetting the function, make sure to move the class to the closest sibling element

I am currently utilizing a slider that employs the .prev and .next jQuery functions to toggle the active class, indicating which slide is being displayed. Here is the code responsible for this functionality. It identifies the current sibling with the acti ...

javascriptjquerycss

When a JavaScript/jQuery open window popup triggers the onunload event after the about:blank page has been

Imagine you have a button that triggers a popup using window.open(): <button id = "my-button">Open window</button>​ You also want to detect when this popup window closes. To achieve this, you can use the following code: $('#my-button& ...

javascriptjquerywindow.openonunload

Connecting PHP modules for AJAX requests: a guide to linking files in PHP

If I have a file structure like the following: / index.php // contains database connection, login details, ... ... /someSubSite content_someSite.html // basic layout, text, forms, ... styles_someSite.css // styling for cont ...

phpjqueryajaxpdoconcept

Tips for sending a PHP JSON array to a JavaScript function using the onclick event

I am trying to pass a PHP JSON array into a JavaScript function when an onclick event occurs. Here is the structure of the PHP array before being encoded as JSON: Array ( [group_id] => 307378872724184 [cir_id] => 221 ) After encoding the a ...

javascriptphpjson

JavaScript Numbers Having Strange Behavior

Insight The highest integer that can safely be stored in JavaScript is 9007199254740991 link Dilemma 1000000000000 === 999999999999.999999 // Returns true 1000000000000 === 999999999999.99999 // Returns true 1000000000000 === 999999999999.9999 // Re ...

javascriptfloating-pointprecision

The functionality of ng-click and ng-submit seems to be malfunctioning

I am currently facing an issue with my Angular application and PhoneGap. I have a login form along with a login controller set up, but for some reason, the ng-submit function is not working as expected. When the submit button calls the formConnexion() func ...

javascriptangularjscordova

Transferring data from PHP to AJAX and then injecting it into an SQL query

I've been attempting to pass a datepicker variable into an onclick ajax function, which then sends it to another ajax method that passes the variable to an SQL query. The result of the query is then passed back into the ajax function to generate a cha ...

javascriptphpajax

Comparable to LINQ SingleOrDefault()

I frequently utilize this particular pattern in my Typescript coding: class Vegetable { constructor(public id: number, public name: string) { } } var vegetableArray = new Array<Vegetable>(); vegetableArray.push(new Vegetable(1, "Carrot")); ...

javascriptlinqtypescripttypescript1.5

An error occurred while trying to set the property 'IS_CHECK' of an object that is undefined

I'm attempting to create a checkbox that, when selected, should also select everything else. I followed the code example provided in this tutorial for angular 2. However, I encountered an error: "ERROR TypeError: Cannot set property 'IS_CHECK&ap ...

htmlangulartypescript