Div element with fixed position that dynamically adjusts its height according to the position of the

Currently, I am designing a website with two sidebars and a center wrapper for the main content. The sidebars will contain links that jump the user to different sections of the page. I have fixed the position of the sidebars so they stay visible as the user scrolls down, but I am facing an issue with the footer blocking the links when the user reaches the bottom of the page.

It's a bit difficult to explain the layout, so I have created a basic version of the website on jsfiddle, which you can view here.

<div class="left">Lorem Ipsum ...</div>
<div class="centre">centre</div>
<div class="right">Lorem Ipsum ...</div>
<div class="footer">footer</div>

My goal is to maintain a 20 pixel margin between the footer (in grey) and the sidebars (in red) at all times. I am struggling to make the sidebars shrink dynamically in response to the footer entering the browser window.

Preferably, I would like to achieve this using HTML and CSS without relying on JavaScript.

Thank you for your help. Regards, Matt

javascriptjqueryhtmlcss

Answer №1

This is the method I used:

let spacing = 50;
let defaultHeight = $(".panel").outerHeight();

$(window).scroll(function() {

  let calculatedHeight = $(".footer").offset().top - $(window).scrollTop() - spacing;

  if (calculatedHeight < defaultHeight) {
    $(".left-side, .right-side").height(calculatedHeight);
  } else {
    $(".left-side, .right-side").height(defaultHeight);
  }

});

Check out the JSFiddle demonstration here

Answer №2

To manage layering, you can opt for z-index or employ JavaScript or jQuery scripting.

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

Ways to include multiple tags ahead of one tag in BeautifulSoup

Looking for a solution: I have a single tag I want to insert three a tags before it with different text. Here is what I have tried: headTag = soup.find_all('h1', text='Attendance List') aTag = soup.new_tag('a') aTag['c ...

pythonhtmlbeautifulsoup

Local storage behaving unexpectedly with HTML inputs

CODE: $(document).ready(function () { window.levelsSaved = 1; $('#button1').click() { levelsSaved = [1, 2] } function checkLevels() { localStorage.savedLevels = JSON.stringify(levelsSaved); if (localStorage.savedLevels == [1, 2] ...

jqueryhtml

Having trouble with Array.filter functionality

Despite the multitude of discussions on this topic, I have not been successful in using the Array.filter method to remove an item from a string-based Array. Below is an example of the filter method being used in the context of mutating a Vuex store. UPDAT ...

javascriptvue.jsvuex

Strategies for effectively binding values in dynamically added and removed fields

I am facing an issue with making binding work on dynamic input fields that can be added and removed. Despite trying various methods, I still can't get it to function as desired. Every time I try to bind, only one data row appears in the dynamic input ...

javascriptc#jqueryajax

Adjusting the height property to zero in the absence of an element

I'm currently working on creating a timeline for changeLogs and populating it with data from an AngularJS controller. The issue I'm facing is that the height of the timeline "Line" is set to 6px. This means that even when there is no data in the ...

angularjscss

Error encountered: No geographic indices found for executing a geoNear operation with Mongoose

Initially, I had divided the schemas but later nested them inside my overall document. Despite adding indexes and removing coordinates from location, there seems to be an issue with the nested points. Upon running get Indexes, it shows that there is an i ...

javascriptnode.jsreactjsexpressmongoose

"Enhance your website's search functionality with the power

I initially used Jquery ui auto-complete version 1.8.2, but later upgraded to 1.8.11 and encountered some issues. 1.8.2 1.8.11 $('#term').autocomplete({ minLength : 4, source : rootPath+'/search', se ...

jqueryjquery-ui

Modify the anchor text when a malfunction occurs upon clicking

Whenever I click on the link, I am able to retrieve the correct id, but the status changes for all posts instead of just the selected item. Below is the HTML code: <div th:each="p : ${posts}"> <div id="para"> <a style="float: right;" href= ...

javajavascriptjqueryhtmlajax

How to combine two tables in Sequelize using a one-to-many relationship

I'm currently working with two models: User and Foto. In my application, each User can have multiple fotos, and each foto is associated with only one user. My challenge lies in using the include function. I am able to use it when querying for the us ...

javascriptnode.jspostgresqlsequelize.js

Issue: "Access-Control-Allow-Origin does not allow origin null" error message is returned when attempting to access a PHP file using jQuery's ajax method with dataType text/html selected

Why am I encountering this issue in Chrome when using dataType text and HTML? It seems to work fine if I output JavaScript and set the dataType to script. How can I return non-JavaScript data from a PHP file? Client-side code: $.ajax({ url: ...

phpjavascriptjqueryajax

Load information into a different entity

I need help with adding new values to an existing object. When I receive some form data from noteValue, I also have additional input data in my component under person that I would like to integrate into noteValue before saving it. let noteValue = form.va ...

javascriptangulartypescript

What is the best way to ensure that form inputs and labels stay aligned?

Let's consider a scenario where there is a web page containing a form: <form> <label for="FirstName">First:</label> <input name="FirstName" type="text"> <label for="MiddleName">Middle:</label> <input n ...

htmlcss

Retrieving information from the API to populate a child component in Next.js

I have been developing a header component and here's the code snippet: import style from '../../styles/header.css'; import '../../styles/globals.css'; export default function Header({data}){ const [showMe, setShowMe] = useStat ...

javascriptreactjsnext.js

The two <p> elements are being pushed to the right column, which is not their intended display

A snippet of less.css code is available at this link: #content { overflow: hidden; width: 100%; p { float: left; width: 465px; padding: 0px 25px 0px 35px; margin: 0px; br { line-height: 2. ...

htmlcsscss-floatless

Tips for designing adjustable text in bootstrap 4

Could someone please assist me with making text responsive using Bootstrap 4? I have searched everywhere but it's strange to see that there are no tutorials on this topic. Below are my codes in case you would like to provide guidance. <div class=" ...

htmlcsstwitter-bootstrap-4

What is the best way to insert a new row into a table upon clicking a button with Javascript?

Hi everyone, I'm facing an issue with my code. Whenever I click on "Add Product", I want a new row with the same fields to be added. However, it's not working as expected when I run the code. Below is the HTML: <table class="table" id="conci ...

javascriptjqueryhtmldom

Utilize Node.js to sort through data

One API is providing me with this type of response. I need to extract the latitude and longitude of a single entity. How can I filter this data using JavaScript (Node.js)? header { gtfs_realtime_version: "1.0" incrementality: FULL_DATASET timestamp: ...

javascriptarraysnode.jsopendata

What could be causing the delay in my IP camera image updates?

I have implemented a jQuery script to update the src attribute of an <img> element on a webpage at regular intervals. However, I am facing an issue where the image is not consistently updated according to the specified setInterval. Interestingly, dir ...

jqueryhtmlip-camera

Navigating through a JavaScript object array within another object

I am looking to iterate through a JavaScript object array Here is my object response: { "kind": "calendar#events", "etag": "\"p3288namrojte20g\"", "summary": "pedicura", "updated": "2019-05-01T14:25:51.642Z", "timeZone": "America/Argentina ...

javascriptarraysobject

Turn off automatic zooming for mobile device input

One common issue observed in mobile browsers is that they tend to zoom in on an input field or select drop-down when focused. After exploring various solutions, the most elegant one I came across involves setting the font-size of the input field to 16px. W ...

javascripthtmlioscssmobile