CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Maharkus
Maharkus

Reputation: 2898

Position a fixed element below another fixed element

I have two fixed elements, one of which can either have display: block or display: none. The other fixed element is always going to be visible. I want the elements to stick to the top of the website, while having them not overlay each other.

The only proposed solution I found is in these questions:

How to position a fixed div under another fixed div?

Fixed element below fixed element without JS

Put your two divs inside another container div and set that one as fixed.

I can't do that however, as both of these elements are on different positions in the code, which I am not able to change.

Here's a code snippet demonstrating my problem:

nav,
.secondmenu {
  position: fixed;
  height: 120px;
  opacity: 1;
  top: 0;
  width: 100%;
  background: lightgrey;
}

.secondmenu {
  height: 50px;
  background: grey;
  opacity: 1;
  z-index: 2;
}

body {
  height: 1000px;
}
<div class="secondmenu">Might be there or not and overlays the other navigation</div>
<div>Some other stuff separating the two from each other with relative position</div>
<nav></nav>

What I want and things to keep in mind:

Upvotes: 3

Views: 6848

Answers (3)

alib0ng0
alib0ng0

Reputation: 470

Have you tried Sticky Kit? http://leafo.net/sticky-kit/

Sticky-kit provides an easy way to attach elements to the page when the user scrolls such that the element is always visible.

Upvotes: 0

jsadev.net
jsadev.net

Reputation: 2590

this could bo done adding a 'top' with the height of the first nav to the second, like i did here.

Note: This is not the complete solution: If you want to show the second nav only you could do this using js by setting the 'top' back to 0.

nav,
.secondmenu {
  position: fixed;
  height: 120px;
  opacity: 1;
  top: 0;
  width: 100%;
  background: lightgrey;
}

.secondmenu {
  height: 50px;
  background: grey;
  opacity: 1;
  z-index: 2;
  top: 120px;
}

body {
  height: 1000px;
}
<div class="secondmenu">Might be there or not and overlays the other navigation</div>
<div>Some other stuff separating the two from each other with relative position</div>
<nav></nav>

Upvotes: 1

Swapnil Sanu
Swapnil Sanu

Reputation: 76

Creating a holder for both of them is the proper approach. But in your case you can position both of them fixed. and when the other one is hidden or shown you can handled both elements style(i.e. top and left properties) via Javascript

Try like below enter image description here

Upvotes: 0

Related Questions