Guidelines for attaching a div to the bottom of a page?

I have a navigation menu inside div.wrapper, and I am trying to make the div.wrapper stick to the footer.

<div class="wrapper">
    <div id="menu">
        <ul>
            <li>1.</li>
            <li>2.</li>
            <li>3.</li>
        </ul>
    </div>
    <div class="push"></div>
</div>

<div class="footer">
    <div id="footer-menu"></div>
</div>

Is there a way to achieve this? Here is my code on jsfiddle. I have tried moving the menu from .wrapper to .footer, but it seems that when scrolling, the menu does not stick with the footer as intended.

javascriptjquerycsshtml

Answer №1

Take a look at this newly updated example. This method should help you achieve the desired result without the need for any JavaScript or JQuery code, relying solely on CSS.

Updates to CSS classes :

.footer {
    position : fixed;
    bottom : 0;
    height: 155px;
    background-color : red;
    width : 100%;
}

#menu{
    position : fixed;
    bottom : 60px;
    z-index : 1;
}

The use of position:fixed will handle window scrolling. Note the addition of the bottom property to both classes. For the footer, it is set to 0, while for the menu, it is set to 60px. Adjust the value of bottom in the menu class to position it as needed. The z-index property ensures the menu appears above the footer.

Furthermore, consider utilizing the footer tag instead of using a div with the class footer.

Answer №2

To implement this functionality, follow these steps:

$('#menu').appendTo('.footer').css('position','fixed');

If you simply need to move the menu, use this line of code:

$('#menu').appendTo('.footer');

In case you want the menu to move when scrolling, consider using the following script:

$(window).on('scroll',function(){
// Add logic for when to move
var t = $(window).scrollTop();
if(t>300)
    $('#menu').appendTo('.footer');
});

Check out the demo and also the demo with scroll to see it in action.

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 there a way in CSS to apply multiple colors to individual letters within a word?

Is it possible to add random colors to every pixel of a letter or multiple colors to a letter using CSS? Check out this example. ...

csshtml

Ordering aggregate results by multiple fields with Mongoose

Here is a query using mongoose that I need help with: MinutesSpentStudying.aggregate([ { $match: { connected_user_id: ObjectId(user_id) } }, { $project: { minutes_spent_studying: 1, year: { $year: "$date" }, ...

javascriptnode.jsmongodbmongooseaggregate

How can we use SWR to fetch user data conditionally based on their logged-in state?

I am facing an issue with setting the UI state based on whether a user is logged in or not. The UI should display different states accordingly. I am currently using SSG for page generation and SWR for user data retrieval. However, I noticed that when call ...

javascriptreactjsauthenticationnext.jsswr

Difficulty persisting when removing accents/diacritics from a string in Angular with IE 11

When attempting to utilize the String.normalize("NFD").replace(/[\u0300-\u036f]/g, "") method, I encountered an issue in IE11. ERROR TypeError: The object does not support the property or method "normalize" ...

javascriptangulartypescriptinternet-explorer

Why isn't the externally loaded JS file executing properly?

My javascript code functions properly when it's embedded within the HTML file. However, I encounter issues when I try to import it externally. The Google Developer Tools indicate that the file has been loaded successfully, but there seems to be no vis ...

javascripthtml

The navigation bar remains fixed while the section heading fails to display properly

================================= My webpage acts like a homepage on the web. The issue arises when clicking on a new link, as my navbar is fixed and covers the section heading. I need the page to display the section heading properly even after clicking o ...

javascripthtmlcss

Converting Geometry into BufferGeometry

From my understanding, Geometry contains a javascript object structure of the vertices and faces, while BufferGeometry stores raw WebGL data using Float32Arrays, etc. Is there a method to convert regular Geometry into BufferGeometry, which is more memory ...

javascriptthree.jsbuffer-geometry

Puppeteer: Easier method for managing new pages opened by clicking a[target="_blank"]; pause for loading and incorporate timeout controls

Overview I'm seeking a more streamlined approach to managing link clicks that open new pages (such as target="_blank" anchor tags). By "handle," I mean: fetch the new page object wait for the new tab to load (with specified timeout) Steps to r ...

javascriptnode.jspuppeteer

Adjusting the size of a Google map based on the size of the browser

Currently, I am working on implementing Google Maps API v3. The map is displaying perfectly on my page, but the issue arises when I resize the browser. Upon resizing, the map reverts to its original size as it was when the page initially loaded. This is t ...

cssgoogle-maps-api-3

How can we improve the resizing of images for smaller screens?

Don't let the title fool you. Check out this code: #headerimg { background: url('http://artotek.fi/css/images/artoteklogo.gif'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; border-bottom: solid ...

htmlcss

Issue with Angular ui-select causing repeated $http requests in ui-select-choices

I'm currently working on integrating ui-select into my project, and this time I need to pass a controller function as options to ui-select-choices. Here's how it's set up: HTML: <ui-select ng-model="selectedItem" theme="selectize" ng-di ...

javascriptjqueryangularjsui-selectui-select2

React window resizing actionsWould you like some more information on this

I am attempting to create a resize function that will retrieve the window width and dynamically display it using react. Here is my current code: class Welcome extends React.Component { constructor() { super(); this.state = { ...

javascriptreactjs

Include a scrollbar within a Bootstrap table grid under a div with a width of 12 columns

How can I add a scrollbar to the grid below? It is using a bootstrap table inside a bootstrap col 12 div. I have attempted to use the following CSS, but it does not apply a scrollbar, it only disrupts the columns. divgrid.horizontal { width: 100%; ...

htmlcssvue.jsbootstrap-4styles

Expanding the navbar with Bootstrap 3.0 by using the navbar-brand class

I'm facing an issue with the navbar-brand while adding my logo. I am using the latest version of bootstrap CSS from getbootstrap.com, and the problem is also evident there: The navbar becomes slightly oversized when the logo is included. However, if I ...

csstwitter-bootstrapnavbar

Using Unobtrusive Ajax, learn to integrate data-ajax-confirm with sweetalert

Here is an example of a form using AJAX: <form method="post" data-ajax="true" data-ajax-method="post" data-ajax-complete="completed" data-ajax-confirm="Are you sure you want ...

jqueryasp.net-corerazor-pagesunobtrusive-ajax

Activate the q-file toggle for the Quasar framework when a different button is selected

How can I make the file selector q-file toggle in Quasar framework when a specific button is clicked? My current attempt: When this button is clicked, it should toggle the q-file: <button @click="toggleFileSelector">Toggle File Selector&l ...

javascriptvue.jsvuejs2vue-componentquasar-framework

Ensuring props are resilient even when an incorrect type is provided during testing

In my development using the MERN stack and Redux, I encountered an issue while testing props on one of my components. Despite defining all types and running tests, they still pass even with incorrect data entered. I have tried specifying the shape of each ...

javascriptreactjsreduxreact-reduxmern

Implementing the 'not-allowed' cursor style on disabled rows in Material UI datagrid

I have a specific disabled row in a Material UI data grid where users are unable to select or perform any actions on it. I am looking to display the cursor as "not-allowed" on this particular row. How can we apply styling to only this row since there is no ...

javascriptreactjsmaterial-ui

Exploring Angular data iteration with Tab and its contentLearn how to loop through Tab elements

Upon receiving a response from the API, this is what I get: const myObj = [ { 'tabName': 'Tab1', 'otherDetails': [ { 'formType': 'Continuous' }, { 'formType& ...

javascriptjqueryangulartypescriptangular8

Issue with nodes/JavaScript: Array objects not being properly updated

Being new to Javascript and Node.js, I attempted to code a simple program that generates an array of planes with varying index values. I started by defining a plane object with default values and tried to update the index value in a for loop. However, whe ...

javascriptarraysnode.jsjsonfor-loop