Is there a way to keep a div fixed at the bottom of the viewport by using position: fixed; bottom: 0;, then switch it to position: absolute; bottom: 0; when scrolling reaches the footer?
I need the div to remain at the bottom of the viewport initially, and then move to the bottom of the content div without overlapping the footer.
Any bonus points for a compass/sass solution would be greatly appreciated!
Take a look at the interactive example in this fiddle (based on your code), showcasing a functional implementation with a footer height of 100px.
Below is the necessary JavaScript:
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
$('div#scrolled').css({'bottom' : '100px'});
} else {
$('div#scrolled').css({'bottom' : '0px'});
}
});
This script monitors scrolling to determine if the user has reached within 100 pixels of the bottom, adjusting the position of the fixed element accordingly. To make the footer appear right at the absolute bottom, simply remove the 100 from the if statement:
if ($(window).scrollTop() + $(window).height() >= $(document).height()) { ...UPDATE:
For a smoother experience, check out the "progressive" version of the code here.
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
var distance = 100 - ($(document).height() - ($(window).scrollTop() + $(window).height())) + "px";
$('div#scrolled').css({'bottom' : distance});
} else {
$('div#scrolled').css({'bottom' : '0px'});
}
});
Now, instead of a sudden change when nearing the bottom, this version smoothly adjusts the position depending on the scroll position.
I hope you find this helpful!
To keep your footer visible, use the CSS property position:fixed and include a margin-bottom:100px on your footer div if it is 100px tall.
Another option (although not advised) would be to use JavaScript to check if
scrollHeight == scrollTop + offsetHeightI currently have 3 images named back_about_1.jpg, back_about_2.jpg, and back_about_3.jpg. There is a div with the ID "about" - <div id="about"></div> The default background image of the div is set to back_about_1.jpg using CSS - background: u ...
I am encountering a troublesome issue that I just can't seem to resolve. My current setup involves using AngularJs to showcase a set of cards, each equipped with its own dropdown menu. Here's the snippet of code in question: <div ng-repeat=&q ...
In my angular template, I have a basic ng-repeat with some div elements. Now, I am looking to add a class to a specific div if the $routeParams.userId matches the id of the object in the loop. You can refer to the second line of code below for clarificatio ...
Working on a webpage at this link, I have structured my HTML as follows: <div id="wrapper"> <div id="main"> <div class="images"> <p>Content</p> <div class="clear"></div> ...
I need assistance in designing a row with two columns. I am looking to align the right column to the right side of the page without using container-fluid. Can someone please help me with this? Thank you https://i.sstatic.net/4kh9O.jpg ...
Currently, I am attempting to specify the width and height for only the (Iphone 7 Plus) within my project using withStyles. import { withStyles } from "@material-ui/core"; I have tested the following code: "@media (width: 414px) and (height ...
Struggling with UX design here. Working on an app in React with Material UI, aiming for a look similar to this: https://i.sstatic.net/h1alm.png My goal is to make the "Some Title" section dynamic from my database, along with the contents. Can't seem ...
WooCommerce widgets are great, but I'm struggling to customize the styling. Can anyone lend a hand? ...
I have a collection of elements that I would like to combine into a swipeable carousel. Is there a way to achieve this, specifically to make it a carousel only in mobile view? If needed, here is the HTML code. Thank you for your assistance. <div class= ...
While sending an HTML email from a nodejs app, I encountered an issue with Gmail on iOS where elements with background-color or color properties were getting reversed. This was most noticeable on black and white elements. Despite consulting various guides ...
Can anyone help me with creating a fullscreen menu (navbar) for mobile devices? I want the navbar to occupy the entire viewport when the hamburger menu is clicked. I managed to achieve this by simply adding: #navbarText{ height: 100vh; } However, the ...
I'm struggling to position the large green circle and the dice image on top of each other as well as below each other. How can I achieve the desired layout shown in this image? Here's what I have managed to do so far https://i.sstatic.net/ryIPl.p ...
I've implemented the following CSS code to ensure that the display sentence doesn't exceed 2 lines, with the remaining text being replaced by "...". .bell-notification-max-words-display { overflow: hidden; display: -webkit-box; ...
Looking to create a clickable link for the .wrapper div that directs users to the location of a.icon. Want the .wrapper div to activate the a.icon:hover state when hovered over, not just when hovering over the icon itself. Any assistance would be highly a ...
I am looking to create a grid filled with numerous photos in a row. However, due to the limited width of the web page, I need to implement horizontal scrolling. Check out my solution here: http://jsfiddle.net/49REZ/ HTML <div class="wrapper"> ...
I have a couple of inquiries. First off, I'm facing an issue with centering everything within a form while aligning the text to the left side of the fields. I've attempted using justify-center and align-items within the "container" class and th ...
I recently downloaded a Reactbootstrap theme and managed to integrate it with NextJS successfully. However, I am facing an issue where my <div className="main-panel"> in the Layout.js is extending slightly beyond the window. It seems like t ...
To view the related code snippet, click on this link: http://jsfiddle.net/Ws8ux/ Is there a way to position the text under the logo without hiding it through display:none or text-indent? I am aiming to bring the image up while keeping the logo in the back ...
I am currently working on creating dynamic rectangular boxes and I am facing some difficulties with inserting text into the shapes. The SVG text requires setting x and y coordinates in separate text tags, and doesn't have built-in width and height pro ...
Initially, my perception of CSS was that it was only used for styling the appearance of a document when viewed in a browser. However, I soon came to realize that search engines also utilize CSS for indexing web pages. It is said that search engines do not ...