Jquery solution for a fixed footer on a window

I come across a solution (which includes a helpful screen rewrite fix in the comments by Luco) that fits my needs perfectly. Here is the revised code that has been fixed and tested:

// Utilizing window load event to account for image-dependent window height
$(window).bind("load", function() { 

    var footerHeight = 0,
        footerTop = 0,
        $footer = $("#footer");

    positionFooter();

    function positionFooter() {

        footerHeight = $footer.outerHeight(); // accounting for padding/margins
        footerTop = ($(window).scrollTop() + $(window).height() - footerHeight) + "px";

        if (($(document.body).height() + footerHeight) < $(window).height()) {
            $footer.css({
                position: "absolute",
                top: $footer.offset().top // accounting for padding/margins
            }).stop().
                animate({
                top: footerTop
            },-1);
        } else {
            $footer.css({
                position: "static"
            });
        }
    }

    $(window)
     .scroll(positionFooter)
     .resize(positionFooter)

});

The above code functions as expected with jquery version 1.3.2. However, upon attempting to implement version 1.12.4, it no longer works correctly. Additionally, Bootstrap framework is being utilized. Can anyone shed light on why this might be happening?

Answer №1

To achieve this layout using only CSS with Flexbox, you can utilize any container as opposed to body. For demonstration purposes, body is being used in this example.

If you desire the element to be persistently sticky at the bottom of your window, simply include the following CSS:

footer
{
    position: sticky;
    bottom: 0;
}

body
{
  /* Establish a minimum height equal to 100% of the viewport height */
  min-height: 100vh;
  /* Enable flexbox for the container */
  display: flex;
  /* Configure flexbox layout to column */
  flex-direction: column;
  /* Align items along the flex axis */
  align-items: center;
  margin: 0;
}

footer
{
  /* Apply infinite margin from the top */
  margin-top: auto;
}
<main>
Hey it's main content here
</main>
<footer>
Look I'm sticky!
</footer>

Answer №2

Yes, it is effective.. Ensure that the page is properly structured with correct HTML tags, including "" at the beginning of the document...

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

Ensure an element stays in its position relative to another element by utilizing the CSS property "position: absolute"

I want to incorporate a circle with an image inside into a navbar. The circle should be larger than the navbar, similar to the image shown here: https://i.sstatic.net/kpJgC.png I have been using "position: absolute" to keep the circle in place, but the is ...

Issues with exporting data to Excel in WEB API are causing problems and need to

I am having some issues with exporting JQGrid data to Excel from my WEB API controller. I'm trying to handle it through a controller method and everything seems to be working fine, but the Excel file is not showing up properly. <input type="image" ...

Unable to Show JSON Data in jTable

My challenge involves integrating JSON data from a Laravel controller into a jQuery jTable for display. Although the table successfully receives the data upon request, it fails to display it as intended. The jTable is configured using the code below: $(& ...

use triple quotes for python variable declaration

I am looking to extract information from an HTML file that contains elements with the class name "link". My challenge is to read each line into a variable and then parse it, all while using triple quotation marks. How can I create a string variable that ad ...

Instructions on calculating the sum of a checkbox value and a textbox value

Here, my goal is to dynamically calculate the total value of selected checkboxes (Checkbox1 and Checkbox3) with the value in TextBox1, and then display the sum in TextBox2 without the need for any button click event. <div> <asp:Tex ...

Having an issue where the Jquery clone function is only duplicating the content once. Looking to

I'm currently working on existing HTML table code. My goal is to copy the text from the 'th' header rows and paste them inside the corresponding td cells for each subsequent row. While I have successfully managed to copy the header row, it o ...

Angular Material: div not being filled by layout-fill

<!-- Container Div --> <div layout-fill> <!-- Image Div --> <div layout="column" layout-align="center center" class="coverImage" layout-fill> <md-content class="md-padding"> Sample Text Here ...

JQuery Validate Plugin - Prompt validation with custom method instead of lazy validation

It appears that the validate plugin is eagerly validating a custom method when it should be lazy, unlike all other validations that occur only when the form is submitted. Here is the custom method in question: $.validator.addMethod("refDataAcInput", func ...

Interactive navigation with jQuery

I am currently utilizing a jQuery menu script that enhances the navigation structure on my website: (function($) { $.fn.blowfish = function() { // concealing the original ul dom tree $(this).hide(); // constructing a container from top-l ...

Ways to update the DOM following modifications to a data attribute

I'm currently working on a small CMS system that handles translations for static pages in multiple languages. The system refreshes and loads translations dynamically, but I've encountered some bugs that are proving difficult to resolve. One issue ...

The dynamic addition of the active class is malfunctioning

I have dynamically added a class using AngularJS, but it seems to not be functioning correctly. As I am new to AngularJS, I would appreciate any suggestions to resolve this issue. Below is my HTML code: <div class="col-md-15 col-sm-3" ng-repeat="data i ...

Changing the Input Label Color on Hover in Material-UI TextField

I have a custom styled Mui TextField called CustomTextField. It changes the input background color and font color on hover, but I also want to change the label font color when hovered over. Currently, the input background changes from black to white on hov ...

Implemented a solution to ensure the menubar remains fixed when zooming in and out

When zooming in and out on a webpage, the menu does not stay fixed to the header image shown in the figure below: The CSS code for this issue is as follows: #navmenu{ z-index:99999; margin-top:40px; position:absolute; width:100%; m ...

Tips to stop scrolling when clicking on a link in a Vue.js carousel

How can I prevent the page from scrolling when clicking on a link in a Vue.js carousel? I've created a carousel card to mimic the ones found on Netflix's main page. It works fine on a single component but when I add multiple carousel components ...

Is it possible to have the ShowHide plugin fade in instead of toggling?

I'm currently utilizing the ShowHide Plugin and attempting to make it fade in instead of toggle/slide into view. Here's my code snippet: showHide.js (function ($) { $.fn.showHide = function (options) { //default variables for the p ...

Partial View fails to render on the webpage

After submitting information from my first partial view, I attempted to load a second partial view. However, upon submission, the first partial view just refreshes and remains on the same page instead of loading the new view. Despite setting up my controll ...

Tips for Adding or Deleting 2 Rows in a Table

When the basket icon on the right is clicked, I want to remove both the current <tr> and the yellow one as well. Check out this screenshot: This is the HTML code for the two rows that need to be deleted with a click: <tr> <t ...

The setTimeout function within the map function does not output any JSX element

I have been pondering the possibility of creating animated buttons using setTimeout on map elements. As I delve into learning React Transition group, I came up with this code snippet: function NavItemSub(props) { const array1 = props.array1; return ( ...

Ways to identify local storage when a user visits the page for the first time using jQuery

As a beginner in the world of local storage in Jquery, I am looking to implement a feature on my Bootstrap 4 accordion. The desired functionality is as follows: If a user is visiting the page for the first time, all accordions should be open by default ...

Using Javascript to save content to a text file across multiple lines

I am working on a coding project that involves extracting data from a JSON file via a URL and parsing the JSON content. The script successfully filters out the necessary data, but now I want to write this data to a text file with each piece of information ...