Positioning an immovable element beneath a fixed element that can vary in height

Question

Positioning an immovable element beneath a fixed element that can vary in height

I am working on a webpage that features a fixed menu at the top-left corner, followed by the main content. My goal is to ensure that the content appears below the menu, but since I do not know the exact height of the menu in advance (as it can vary based on the user's device or window size), setting a fixed top margin for the content is not feasible. As a result, when the page loads, the menu appears at the top and the content follows below it, with the ability to scroll the content behind the fixed menu.

While one workaround involves duplicating the menu above the content as a static hidden element, I am seeking a more elegant solution.

I envision something like this:

<div id="menu">
    Vertical list items go here
</div>
<div id="content">
    Main content goes here
</div>


#menu {
    position: fixed;
    z-index: 999;
}

#content { margin-top: [height of #menu, which is unknown until the page renders] }

html css css-position

Answer 1

Answer №1

If you're looking to make your menu dynamic, a simple JavaScript solution can help. By setting the position and margin top on window load, you can ensure that the menu stays in place and resolves any potential issues.

#menu {z-index: 999; }

<div id="menu">
  a (vertical) list goes here
</div>
<div id="content">
   the content goes here
</div>
<script>
  window.onload = function() {
    var menuElement = document.getElementById("menu");
    var menuHeight = menuElement.offsetHeight;
    menuElement.style.position = "fixed";
    document.getElementById("content").style.marginTop = menuHeight+"px";
  };
</script>

Answer 2

If you're looking to make your menu dynamic, a simple JavaScript solution can help. By setting the position and margin top on window load, you can ensure that the menu stays in place and resolves any potential issues.

#menu {z-index: 999; }

<div id="menu">
  a (vertical) list goes here
</div>
<div id="content">
   the content goes here
</div>
<script>
  window.onload = function() {
    var menuElement = document.getElementById("menu");
    var menuHeight = menuElement.offsetHeight;
    menuElement.style.position = "fixed";
    document.getElementById("content").style.marginTop = menuHeight+"px";
  };
</script>

Answer 3

Answer №2

To achieve this effect, you will need to utilize JavaScript. When the user starts scrolling, add the class scrolled and set its position to fixed.

var scrollPosition = "";

$(window).scroll(function () {

  scrollPosition = $(window).scrollTop();

  scrollPosition > 50 ? $('#menu').addClass("scrolled") : $('#menu').removeClass("scrolled");
});

body {
margin:0;
padding:0;
}
#menu {
border: 1px solid red;
}

#menu.scrolled {
position: fixed;
top:0;
left:0;
right:0;
background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
    a (vertical) list goes here
</div>
<div id="content">
    Insert your content here...
</div>

Alternative CSS Approach:

.wrapper {
padding-top: 20px; /* adjust padding top based on menu height */
}

#menu {
position: fixed;
top:0;
left:0;
right:0;
border: 1px solid red;
background-color: #fff;
}

<div class="wrapper">
<div id="menu">
    Your vertical list goes here
</div>
<div id="content">
    Insert your content here...
</div>

Answer 4

To achieve this effect, you will need to utilize JavaScript. When the user starts scrolling, add the class scrolled and set its position to fixed.

var scrollPosition = "";

$(window).scroll(function () {

  scrollPosition = $(window).scrollTop();

  scrollPosition > 50 ? $('#menu').addClass("scrolled") : $('#menu').removeClass("scrolled");
});

body {
margin:0;
padding:0;
}
#menu {
border: 1px solid red;
}

#menu.scrolled {
position: fixed;
top:0;
left:0;
right:0;
background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
    a (vertical) list goes here
</div>
<div id="content">
    Insert your content here...
</div>

Alternative CSS Approach:

.wrapper {
padding-top: 20px; /* adjust padding top based on menu height */
}

#menu {
position: fixed;
top:0;
left:0;
right:0;
border: 1px solid red;
background-color: #fff;
}

<div class="wrapper">
<div id="menu">
    Your vertical list goes here
</div>
<div id="content">
    Insert your content here...
</div>

Positioning an immovable element beneath a fixed element that can vary in height

Answer №1

Answer №2

Similar questions

Enable scrolling exclusively for the content within a tab, without affecting the tab label in Clarity Tabs

What is preventing me from concealing my input field when its type is set to "file"?

Showing the json encoded array received from an ajax response

Markdown boasts of a sturdy partially-horizontal line

Enhancing Next.js Images with Custom CSS Styles

Display additional content button, dynamic div identification

What is the best way to extract a JSON object from a website search using getJSON or similar techniques?

Stay up-to-date with the latest headlines on your Android device!

Guide to changing an image on a canvas with KineticJS

Creating the main webpage's HTML through the Codebehind feature in ASP.Net using VB

HTML dropdown menu to trigger an action with the submitted URL

Targeting an HTML form to the top frame

Creating trails by following the cursor's movement in KineticJS

Creating dynamic height based on width using JavaScript

Using Bootstrap 4: How to maximize the width of a span element placed near a label

Outputting PHP code as plain text with jQuery

The embed video is camouflaged within the bootstrap mobile display

Tips for switching "a" tag elements to reveal concealed DIVs in a similar way to the Facebook notification center

What is the reason for the overflow occurring in a container of identical size due to this particular element?

What might be causing the background color to remain the same when focusing on a div element