What is the best way to stop a fixed element from overlapping or moving underneath another element?

Despite extensive searches on Google and various websites, I have been unable to find a suitable solution to my specific issue.

The problem arises on a page where there is a fixed header and a fixed navigation div positioned along the right side in the main content. As the page is scrolled to the bottom, the footer ends up covering the navigation div, as illustrated here:

http://codepen.io/anon/pen/gAjcr
(The exaggerated length of the links list clearly demonstrates the problem)

I have experimented with adjusting margins and padding using CSS but have not succeeded in resolving the issue. The only solution that comes to mind is utilizing JavaScript to calculate the page offset and footer height, and possibly making the navigation div absolutely positioned as the page nears the bottom - although this approach may seem excessive.

I am seeking a behavior where as the footer approaches, it would "push" the navigation div upwards instead of simply covering it.

Thank you for any assistance!

htmlcss

Answer №1

Take a look at this code snippet

Utilizing JQuery to create a dynamic effect

var r=$('#hello').offset().top;
$(window).scroll(function() {
var s=r - $(window).scrollTop();
if(s <= $('#header').height()) {
    $('#header').css({'position':'absolute'});
}
else{
    $('#header').css({'position':'fixed'});
}
});

Updated code with footer effect pushing the header

To achieve a similar effect for the navigation bar above, simply replace the header ID in the JQuery code with the nav ID.

View this demonstration / Watch in Fullscreen mode

Answer №2

Is this what you're looking for?

 #footer {
    background-color: #0098e9;
    height: 200px;
    z-index: -20;
    position:relative; /*include this*/
}

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

Can a Chrome App access a user's files on their hard drive with proper permissions?

I'm currently working on a Chrome Packaged App that includes video playback functionality. My main goal is to enable users to stream online media (such as MP4 videos) while also giving them the option to save the video to a location of their choice. ...

htmlgoogle-chromehtml5-videogoogle-chrome-app

Determining the Location of a Drag and Drop Item

I have been utilizing the code found at for implementing Drag & Drop functionality. My inquiry is: How can I retrieve the exact position (x,y) of a group once it has been dragged and dropped? ...

javascripthtmlcanvasdrag-and-dropkineticjs

Instructions for passing a single value from a while loop and showing a different value in a text box through PHP

Can one value be displayed while sending another value in an Input text field simultaneously? I have a form that displays details in descending order, but when I update the details from another page, they are being updated in ascending order instead. Cod ...

phphtml

Controlling the Size of Images

I am currently dealing with a significant issue related to saving bandwidth and storage. My website (built on PHP/Laravel) features 5-6 different image sizes in the desktop view. Whenever a user uploads an image, I am required to save 7 versions of that i ...

phphtmljquerycsslaravel

Ways to center the percentage on the progress bar

I'm having an issue with positioning the percentage 100% in the center of the element. I attempted adjusting the spacing in the JavaScript code, but so far it hasn't been successful. Here is the current output for the code: http://jsfiddle.net/G ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Place label at a set position when the mouse hovers over it

I need help creating a simple hover effect on a circle using jQuery. I'm facing an issue where the label location of the city overlaps with the circle when the mouse hovers over it. The label should be fixed in position on top of the red circle. Even ...

htmljquerycsssvggeometry

Ensure that the default value in the text box remains unchanged until new text is input by utilizing jQuery

Can you please review my code snippet on http://jsfiddle.net/7995m/? The issue I'm facing is that the default text in the text box disappears as soon as it's clicked. What I want is for the default text to remain until the user starts typing. Her ...

javascriptjqueryhtmlcss

Having trouble generating an image with JavaScript

I am currently working on incorporating an image onto a webpage using JavaScript. Surprisingly, even the alert('This function works!') is not displaying anything! What could be causing this issue? Please assist! <!DOCTYPE html> <html> ...

javascripthtml

Initiate an Ajax call to pre-fetch video content

I've been attempting to download a video from my own source and display a loading message while it's being downloaded. Once the download is complete, I want to hide the loading icon and have the video ready for playback. My issue lies in gettin ...

javascriptjqueryhtmlajaxvideo

Align buttons to the center within a row using Bootstrap

I am having trouble centering all buttons in each col-md-4: <div class="row position-relative mt-2"> <div class="col-md-4 center-block"> <div class="center-block align-to-bottom"> <div class="btn-group-vertical"> ...

cssbuttonbootstrap-4

Ways to optimize images for social media sharing on a website

I am in the process of building a new website using Elementor and Wordpress. My goal is to incorporate multiple GIFs and images that users can easily share on social media platforms. The challenge I'm facing is that the social icons in Elementor are ...

htmlcsswordpresspluginselementor

What factors must be considered before transitioning from an HTML4 web application to HTML5?

As a newer web apps developer, I've created various applications when HTML 5 was on the rise as the new standard. Now, I'm considering migrating some of those apps to HTML 5 and wondering if it's a good idea. Despite my experience in web d ...

htmlweb-applications

Converting forward slashes (/) to %2f in an AJAX request

I keep encountering this question, but no one seems to have a satisfactory answer. My problem centers around an ajax request that utilizes a value from a text field in the format: 00000000/relay_1A. Whenever I attempt to submit, I receive a 404 error. St ...

jqueryhtmlajaxscala

Obtaining information using SQL queries according to the specified date

I am currently working on a project that involves a database filled with store information and personal transactions. I have created two webpages for this project - one allows users to input a store name and retrieves all transaction info related to that s ...

phphtmlsqldatetime

How can I set up a session in order to fetch information from a MySQL table

Can you guide me on implementing this session: (UserID is part of the login table) Session["UserID"]="usrName"; How can I incorporate the above code into the following script? using System; using System.Data; using System.Collections.Generic; using Sys ...

c#asp.netmysqlhtml

Vue.js application returning 404 error when trying to include a script in index.html

After generating my application with a simple command: vue init webpack I decided to install jquery from the node_modules folder: npm install --save jquery and then added it to my index.html page like this: <head> <script src="node_module ...

javascriptjqueryhtmlvue.js

Use Jsoup to change header tags to h4 in Java code

My HTML code is as follows: <!DOCTYPE html> <html> <body> <h2> heading here </h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <h3> heading here again </h3> <p>This i ...

javahtmljsoup

Is it possible to resize a Div using pure CSS?

Here is the HTML structure I am working with: <div class="outer"> <div class="inner"> <a href="#"/> <a href="#"/> <a href="#"/> </div> </div> This is the corresponding CSS: div.outer{ position:relative; ...

htmlcss

Issue with CSS Reset code causing disruption for one hyperlink

Check out the menu at this link: http://fiddle.jshell.net/V88c6/8/show/ To view the complete jsfiddle, click here: http://jsfiddle.net/V88c6/8/ Here is the HTML code: <div id="head_1"> <div class="inner"> <div class="column ...

htmlcss

Collective CSS Navigation

Apologies if this question has been asked before, as I am unsure of the terminology to use in my search for resources. I am attempting to create a tabbed header menu catered to different groups of individuals. Each group will have its own customized menu ...

htmlcssmenu