Reveal or conceal the footer section as you reach the end of the webpage

My webpage layout consists of a fixed nav-bar at the top, a drop down sidebar, a <div> element with an id of content, some content inside the <div>, and a bottom <div> with a fixed position.

I am trying to hide the bottom <div> when the user scrolls to the bottom of the page. I attempted to achieve this using the following code:

    $('div#content').scroll(function () {
        var fixedBottom = $("#dialog-button-bar");
        if ($('div#content').height() <= ($(window).height() + $(window).scrollTop())) {
            fixedBottom.css("opacity", 0 );
        } else {
            fixedBottom.css("opacity", 1 );
        }
    });

If anyone has a solution to help me achieve this, I would greatly appreciate it. Thank you.

javascripthtmljquerycssscroll

Answer №1

Solving this challenge requires careful handling of the scrollTop() and height() jQuery methods, as their values change when manipulating HTML elements.

To tackle this issue, a boolean variable can be defined to prevent changes to the document height when adding a footer. This allows us to create an if statement that dynamically adjusts the CSS attribute display based on the scroll position.

let footerVisible = false;
var docHeight = 0;

$(window).scroll(function() {
   var scrollPos = $(window).scrollTop() + $(window).height();
   if(footerVisible == false){docHeight = $(document).height()}
   
   if(scrollPos >= docHeight){
    footerVisible = true;
    $('.footer').css('display', 'block');
   }else if(scrollPos <= docHeight){
    footerVisible = false;
    $('.footer').css('display', 'none');
   }
});
*{width:100%;margin:0;padding:0;color:white;text-align:center}
.nav{
  background: #00A19D;
  height:60px;
}
.content{
  background: #FFF8E5;
  height:1500px;
}
.footer{
  background: #345B63;
  height:200px;
  display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class='nav'><br><h1>Nav</h1></section>
<section class='content'></section>
<section class='footer'><br><h1>Magical Footer</h1></section>

Answer №2

Constantly adding scrollTop to the height may result in the if statement always being true, since the total height will always exceed the div's height. Consider comparing the document's height to scrollTop instead of the div's height for more accurate results.

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

Utilizing ThreeJS to Implement Targeted Bloom Effects on Individual Object Components with Emission Mapping

I have a project where I need to showcase 3D objects with small LED lights that should emit a glow effect. I've attempted to use UnrealBloom, but the issue is that it affects the entire scene and makes everything look blurry, not just the parts with t ...

javascriptthree.jslightbloom

Retrieve a dynamic HTML object ID using jQuery within Angular

In my Angular application, I have implemented three accordions on a single page. Each accordion loads a component view containing a dynamically generated table. As a result, there are three tables displayed on the page - one for each accordion section. Abo ...

javascriptjqueryhtmlangularjs

Experiencing Chrome freezing issues due to a setInterval function in combination with React

Can anyone assist me with a countdown issue using React? I am trying to set the minutes and seconds by clicking on + and - buttons, then passing the seconds to a new variable called tottime. However, when the user clicks on Go!, the countdown should start ...

javascriptreactjs

Tips for programmatically adding/removing rows to a table using ReactJS

I'm currently working on a project where I need to dynamically add and delete rows in a table using ReactJS. However, I've encountered an issue - after adding a few rows, the values in each column become the same even if I change them randomly. ...

javascriptreactjsmdbreact

Formulating a Flask view function that does not send a response

I am still new to web programming and Flask, and I have encountered an issue with a website I am developing. I am using a jquery procedure to send a post request to a view function in Flask. This function simply increments a value in my database, and I d ...

jquerypythonsqliteredisflask

Problems encountered while utilizing PHP MVC with AJAX and JSON for deleting multiple records

A table listing records from the database with checkboxes containing associated ID values is displayed. <label class="m-checkbox"> <input type="checkbox" name="order_id[]" value="<?php echo sanitize($failed->order_id); ?>"> <span ...

phpjqueryajax

Applying class to target specific screen size in Bootstrap

I've been utilizing bootstrap for my project. My objective is to assign multiple classes based on screen size, such as sm-col and xs.col. For example, let's say I have a text id <div id="text" class="xs-format lg-format ..."></div> ...

csstwitter-bootstrapbootstrap-4column-count

"Learn the process of incorporating a trendline into a line chart using Highcharts by manipulating the

I am facing difficulties in creating a trend line for a line chart. I have tried some old solutions but they did not work for me. Below is my current code: { "key": "003", "title": "Detections", "ty ...

javascriptreactjsjsonhighchartslinechart

Preventing AngularJS from Ignoring HTML Elements

Is there a way to calculate HTML content within an AngularJS object (such as {{names}}) that includes an '<a>' element? When I try to display it, the result looks like this: <a href="http://www.example.com">link text</a> I&ap ...

javascripthtmlangularjs

There seems to be a column in the MySQL INSERT query that is unidentifiable and does not exist in the list of fields

id and cost are required as integers and cannot be left empty. I encountered the following error message: 'Error: ER_BAD_FIELD_ERROR: Unknown column 'undefined' in 'field list'' var sql = "INSERT INTO Paintings(` ...

javascripthtmlmysqlnode.jsexpress

Functionality of the button disabled in Firefox, despite working perfectly in Chrome

I have been developing a ReactJS application that is now live. Take a look at the deployed version to understand the issue I am facing. In Firefox, the Login button in the Inventory Login section doesn't seem to be working as expected. Despite having ...

javascriptreactjsfirefoxjsx

Please identify the path of chromedriver for selenium-standalone

I've encountered an issue when trying to initialize the selenium-standalone server (https://www.npmjs.com/package/selenium-standalone). The error message I receive is as follows: 14:19:09 /usr/local/lib/node_modules/selenium-standalone/bin/selenium-s ...

javascriptseleniumcommand-linenpmselenium-chromedriver

using sass to nest multiple classes

In an attempt to utilize nested classes with Sass, I am working on a styling code that displays a button on hover. Here is the structure of my SCSS: .item{ border-bottom: 1px dotted #ccc; text-indent: 50px; height: 81%; padding: 2px; text-transf ...

csssass

What is the process of including data in Vue using refs?

My goal is to click a button and have the page scroll up or down. However, I need references for each span I add in order to include an index. The issue arises when trying to incorporate this index into the method. How can I add data to these references? ...

javascriptvue.js

Creating a layout with two divs displayed next to each other using CSS

Just when I thought I had it figured out, my two side-by-side divs are not behaving as intended inside the parent div. Why is the orange "Content" div ending up below the navigation bar? Can anyone spot what I did wrong here? Thank you in advance! CSS: ...

css

What are the steps to use grunt for running a node.js application?

Directory Structure: myapp --public(directory) //contains files related to public (AngularJS, CSS, etc) --server(directory) //contains files related to server --server.js Code server.js //located at root directory ---------------------- ... var app = ...

javascriptnode.jsexpressgruntjs

What steps should I take to ensure the success of this Mocha test?

I am currently utilizing angular, chai, angularmocks, mocha, and karma for testing. The test is displaying the following error: Type error map@[native code] app/main.coffee:30:23 <- app/main.js:23:23 test/main.spec.coffee:59:20 <- test/main.spec.j ...

javascriptangularjscoffeescriptmocha.jskarma-runner

Leveraging $last in Angular for obtaining the final visible element with ng-show

My ng-repeat container div contains multiple images, each with a corresponding div next to it. Using $last, I can make sure only the div of the final image is visible after all images. However, I also have a filter button on the page that hides certain im ...

javascriptjqueryhtmlcssangularjs

Error: Unable to locate the variable deleteChap

Utilizing Jquery to dynamically add elements to an element, I have included an onclick function to one of the <td> tags to trigger a function within the same file. Below is the code snippet for the element: let x = 0; let element = ` <td class=&q ...

javascripthtml

Setting up a React Package by reinstalling a git repository

While immersing myself in learning React JS, I decided to create a git repository containing React components that could be exported and used or installed as a package in a separate React application. I developed some UI Components in a git repository and ...

javascriptnode.jsgitreactjsinstallation