Issue with footer not dynamically adjusting its height when scrolling to the bottom

How can I make the footer fill the entire window when scrolling down 50px from the bottom? I attempted to animate its height, but it's not working as expected.

HTML

<div id="main">
...
</div>

<footer>
    <div id="sitemap">Sitemap</div>
    <div id="about">About Us</div>
    <div id="contact">Contact Us</div>
</footer>

CSS

* { margin:0; padding:0;}
#main { height:1400px;}
footer { background:#333; color:#FAFAFA; border-top:5px solid #000; width:100%;  height:50px; }
footer > div { display:inline-block; height:auto;}
#sitemap { width:25%;}
#about { width:35%;}

jquery

$(window).scroll(function(){
var scrollTop = $(this).scrollTop(),
    docH = $(document).height(),
    winH = $(this).height();

if(scrollTop + winH >= docH-50){
    $('footer').stop().animate({height:'100%'},'slow');
}else{
    $('footer').stop().animate({height:'50px'},'slow');
}
});

Thank you

Answer №1

There seems to be a issue when setting the height to '100%' as it is interpreting 100% of 50px...

You can try including

footer { max-height: 100%; }

within your css file

This adjustment should help resolve the problem you're experiencing

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

Is the div height set to 100% until the content surpasses the height of the browser window

Is there a method to make a div fill 100% of the available page height, until it contains enough content to require a scrollbar? // For example, if the browser height is 600px: <div> // Initially empty, so it will be 600px tall. </div> . ...

Adjusting Spacing Between Characters

I've been looking for a way to convert regular characters (ABC) to full-width characters (ABC), but I haven't had any luck so far. That's why I'm turning to you guys for help. Currently, I don't have any JavaScript code writt ...

Posting Form Data with Ajax in CodeIgniter

Incorporating the CodeIgniter framework along with the jQuery Form plugin available at http://malsup.com/jquery/form/ Encountering challenges in ensuring proper functionality of a form. View <div class="row"> <div class="well c ...

JavaScript form validation problem: Warning for identical responses in the MOST and LEAST sections

I've encountered a challenge while working on an HTML and JavaScript form for a personality test. The issue revolves around validation, particularly when the form includes multiple questions with both "MOST" and "LEAST" radio button options. One spec ...

Issue with a Jquery toggleClass function not working properly on hover

Hello everyone! I am a newbie in the community and relatively new to the world of web programming. I am encountering an issue that is really frustrating me. I attempted to use this code to add a class when hovering over the ul list element so that I can d ...

What is the process for altering the initial day of the week in the full-calendar plugin within a Laravel application?

After installing the Laravel fullcalendar package, I noticed that the start day of the week is set to Sunday. However, I would like to change it to Saturday. Can someone please assist me with this issue? Below is the function in my Controller: public func ...

What is the method for transferring form data to a different page?

Currently utilizing AngularJS version 1.5.6 and looking for guidance on properly passing form data using $location.path. Below is my code snippet for Page A: <form> ... <button type="submit" ng-click="submit(formData)"> ...

Sort the data in Angular JS by one key, but ensure that results with another key set to 0 remain at the end

Here is an array of objects containing information about various car brands: $scope.cars = [ {"brand":"McLaren","price":70,"stock":0}, {"brand":"Renault","price":10,"stock":0}, {"brand":"Ferrari","price":100,"stock":3}, {"brand":"Lamborghini","pri ...

Need to obtain the stack trace from the catch block in a request-p

Currently, I am utilizing the 'request-promise' library in my node-js application for making API calls. However, I am facing challenges in obtaining the correct call stack from the 'catch' function. Upon experimenting with it, I discove ...

Having trouble with jQuery Ajax not transmitting data properly in a CodeIgniter project?

I am brand new to the Codeigniter MVC framework. Whenever I attempt to send data through ajax from the views to the controller, I encounter an error. Please click here to view the image for more details. Here is the code snippet: views/ajax_post_view.php ...

Transferring data from controller to repository in Laravel: a step-by-step guide

Looking for some assistance here! I need to pass an ID to my repository but keep getting the error message illegal offstring id. Any help is appreciated! Here's my controller: public function delete() { $response = ['status' => false ...

The functionality of a Google chart is determined by the value of the AngularJS $scope

I recently started working with AngularJS and Google charts. I've successfully created a Google chart using data from AngularJS. It's functioning properly, but now I want to make the chart dynamic based on my Angular Scope value. I have a filter ...

The Mapbox map fails to display properly upon initial page load

When my Mapbox map loads, I am experiencing issues with it only rendering partially. It seems that adjusting the width of the browser or inspecting the page will cause the map to snap into place and display correctly. To demonstrate this problem, I created ...

How can I prevent the angularFire $add(user) method from duplicating records? Is there a way to ensure that firebase records remain unique?

I need help preventing duplicate records in AngularFire when adding users to my database. How can I ensure that a user is only added once, without creating duplicates? Here is an example of the button I am using: <a class="btn btn-block btn-lg btn-suc ...

Watch an object with AngularJS's $scope and detect and respond only to changes in its property values

Currently, I am monitoring scope changes using a simple watch like this: $scope.$watch('myObject', function(newValue, oldValue) { if (newValue !== oldValue) { return newValue; } }, true); In this case, myObject is an ordinary ob ...

Trigger an alert message upon loading the HTML page with search text

I need to search for specific text on a webpage and receive an alert if the text is found. <script type='text/javascript'> window.onload = function() { if ((document.documentElement.textContent || document.documentElement.innerText ...

Unable to retrieve response from Node Express using Ajax when uploading files with Multer

Currently, I am utilizing multer for image uploads and it is functioning flawlessly. While I can view the data being printed to the console, I am uncertain about how to capture and manipulate this data within the browser. Presented below is my code snippet ...

Utilizing Node.js to match arrays

let items = ["Product",["car","Bike"]]; let result = items[1].map((item) => [items[0], item]); console.log(result); My current output is: [["Product" , "car"], ["Product" , "bike"]], The above code works for this simple output, but I'm unsure ho ...

Facing an issue with displaying a component error in a mat-form-field in Angular 9

I am looking to develop a shared component for displaying errors in Angular Material. Here is my shared component pfa-share-error: <mat-error *ngIf="fieldErrors(fieldName).required && fieldErrors(fieldName)"> Required </mat-err ...

Masonry style attempted for posts but did not produce desired outcome

I've been experimenting with different methods to achieve a masonry style layout for my posts. So far, using float:left seems to work almost perfectly, but occasionally there are gaps between the posts. I'm on the lookout for a solid solution to ...