Footer remains adhesive, does not halt as intended, rebounds upon reaching the bottom

When using scrollToFixed, my goal is to make a footer stick to the bottom of the page until it reaches the actual footer and then stop. However, I'm encountering a bug where it scrolls past the footer and then snaps back to the top of the footer. Any insights on why this is happening? You can view the issue on the live site here:

jQuery('#scroller').scrollToFixed({
    bottom: 0,
    limit:  function() { 
        var limit = 0;
        
        if (jQuery(window).height() > jQuery('#page').height()) {
            jQuery('#colophon').css({'position':'fixed','bottom':'0'});
            jQuery('#scroller').css({'position':'fixed','bottom':'40px'});
        } else {
             jQuery('#colophon').css({'position':'static'});
             limit = jQuery('#scroller').offset().top + 40;
        }
        
        return limit;
    }

});

Answer №1

Make sure to subtract the footer's height when calculating layout.

I didn't have any issues with alignment on my browser for #scroller, but the content was displaying at the bottom. Which browser and version are you using?

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

Diagonal div sliding out from side navbar

As someone who is completely new to diagonal divs, I am looking to recreate the layout shown in the linked home page and menu. Despite spending the entire day searching online, I have been unable to find the specific information I need. That's why I a ...

Creating a Vue component to display a table with two data points per row

Can someone please guide me on how to achieve this using v-for or v-repeat in Vue.js? Any help would be appreciated. Instructions for rendering a table with two pieces of data per row Example JSON Data Format: [ 'x', 'y', ' ...

Extract metadata from a webpage using JavaScript regular expressions

Looking to extract meta tags data using JavaScript (jQuery) and regex. Below are some examples of meta tags: <meta name="description" content="Amazon.com : Google Chromecast HDMI Streaming Media Player : Streaming Media Clients : Electronics" /> &l ...

Conceal certain digits of a credit card number in a masked format for security purposes

Is there a reliable method to mask Credit Card numbers in password format within a text field? **** **** **** 1234 If you are aware of a definitive solution, please share it with us. ...

When jQuery data is not included in the AJAX POST request, it can result in receiving a 415 Unsupported Media Type status code

Recently, I encountered an issue while trying to make a call to an API using jQuery. The problem was that the jQuery call was not passing any data to the API, resulting in a failed response with status code 415 Unsupported Media Type. Below is the snippet ...

What is the best way to add the ".html" suffix to pages in nuxt.js?

Is it possible to add the ".html" extension to a page address? For instance, changing "test_page" to "test_page.html" ...

Is there a way to continuously switch a CSS animation class without needing a second click?

I am seeking a solution to animate the color and size of a div box, then return it to its original state when a button is clicked. Here is an example of my code: document.getElementById("andAction").addEventListener("click", function() { document.getE ...

Tips for personalizing a jQuery Mobile popup

Is there a way to customize the appearance of a dialog box using CSS? I've been struggling with my attempts so far... <div data-role="dialog" id="confirm-clear" class="dialog-custom" > <div data-role="content" > <p>Some ...

How to Adjust CSS Animation Background to Fully Cover Responsive Height

Hi there! I've been working on adding some CSS code to my ReadyMag project, but I'm having trouble with odd aspect ratio browser windows. The code I have is almost doing what I want, but it's not covering the full width and height. How can I ...

Positioning one div beneath another div

As a newcomer to the world of web development, I'm struggling with alignment in my project. Specifically, I have an issue with the features area - every time I add it, it appears above where I want it, below the search bar and image. View example Her ...

Create an interactive webpage that automatically generates new HTML elements after retrieving JSON data from a Web API during page load

I am currently in the process of developing a hybrid Android App using Phonegap/Apache Cordova. The main function of my app is to retrieve data from my web API, which is being served through JSON. I have implemented the following code snippet for this task ...

Creating a dynamic bootstrap carousel featuring Instagram-sourced images with a focus on showcasing nearby content

I'm looking to create a bootstrap carousel (or similar responsive slider) that displays images on the right and left of the main image, visible at the sides of the screen. It would be great if these side images had a transparent overlay or blur effect ...

What is the best way to identify which button was clicked within an HTML form, and then use that information to send different values using AJAX?

I have created the following HTML form with two buttons: <form class="center" id="myform"> <p> <input id="email" name="email" type="email" class="textox email" title="" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_e ...

Leveraging HTML attributes in CMS source code

My website is built using Prestashop, and the content pages are created using: Prestashop > Preferences > CMS > Source-Code. For each CMS page, I utilize basic HTML in the source code. THE ISSUE I am attempting to add a widget to the site&apos ...

Aligning elements within a table to ensure consistency with surrounding content

Issue I am working with an html table that includes a particular column whose content can vary in size. This results in rows of varying heights, which is expected. However, the adjacent column to the variable-sized one contains two buttons that consistent ...

Why is my bootstrap-enhanced website appearing unattractive on MSIE 8?

Check out my website at My website displays perfectly in browsers like Firefox, Chrome, Opera, and the Android Browser. However, when I viewed it on Internet Explorer 8 at my parent's house, it looked all messed up. How can I improve the compatibilit ...

JQuery is a powerful tool for manipulating the web page and

Hello there, Is there anyone who can assist me with this inquiry: Here is the HTML code I am working with: <div class="Breadcrumb"> <a href="#">Home</a>&nbsp;&gt;&nbsp; <a href="#">Projects</a> ...

Personalizing the Twitter Embedded Timeline

I am curious about how much customization options are available for the Embedded Timeline. I searched through the documentation but still have some unanswered questions - maybe I missed something. My goal is to initially display only one tweet and then ha ...

Using Bootstrap to transform date format to mm/dd/yyyy

In my Django web application, I am utilizing Material Kit (Bootstrap) for the front end. My goal is to display the date on the HTML page in the format of mm/dd/yyyy. For example: 06/27/2018 The date in the database table is already stored in the forma ...

Issue with embedding Instagram on Safari browser

My challenge involves dynamically creating an Instagram feed using AJAX. After encountering rendering issues, I turned to research and stumbled upon the following helpful response: The solution proposed was to call this line of code... window.instgrm.Emb ...