CSS: Add spacing from fixed position item - html

Question

I have a fixed-position element (red bar in this case) at top of the viewport. This element is positioned fixed so as it make it non-scrollable as required. It can have a dynamic height.
<div class="bar" id="bar">
</div>
.bar {
height: 20px;
background: red;
position: fixed;
top: 0;
width: 100%;
}
Below that element, there is a button that will toggle the red bar element's visibility. This button should have a top space/ margin of a specific amount say 10px from the red bar when the red bar is displayed and the top space of 10px should be there from the window when the red bar is hidden.
This button should be scrollable.
<div class="btn-wrapper">
<button onclick="toggleBar()">Toggle Bar</button>
</div>
.btn-wrapper {
margin-top: 10px;
}
Below the above button, there is a logo, which should have the same consistent space from the window top whether the red bar is present or not. The logo should be scrollable.
I have almost achieved these requirements except for one thing. I am not able to shift the button down when the red bar is present with the required margin as the red bar is positioned fixed. How this can be achieved?
Here is the codepen
I have added the requirements comments in the codepen's HTML for the elements as well.
Note: The codepen/code which I have provided is for demo purposes. I am working on this for a React app and would prefer a pure CSS way for styling instead of JavaScript if possible.

Answer 1

You should to change margin-top as you're doing display block/none.
Just id to button:
<button id="button" onclick="toggleBar()">Toggle Bar</button>
and slightly modify javascript:
const bar = document.getElementById("bar");
const button = document.getElementById("button");
bar.style.display = "none";
function toggleBar() {
if (bar.style.display === "none") {
bar.style.display = "block";
button.style.marginTop = "10px";
} else {
bar.style.display = "none";
button.style.marginTop = "0px";
}
}
Working codepen

Answer 2

use getBoundingClientRect().height
apply to your 1st element
button.style.marginTop = bar.getBoundingClientRect().height+'px';
Your code should
function toggleBar() {
if (bar.style.display === "none") {
bar.style.display = "block";
} else {
bar.style.display = "none";
}
button.style.marginTop = bar.getBoundingClientRect().height+'px';<------this single line enough
}
toggle simplified
bar.style.display=bar.style.display==='none'?'block':'none';
simplified code:
function toggleBar() {
bar.style.display=bar.style.display==='none'?'block':'none';
button.style.marginTop = bar.getBoundingClientRect().height+'px';<------this single line enough
}

Answer 3

The requirements are:
to move the button down 20px when the bar is showing without moving
anything else
to toggle the bar from display block to display none on alternate clicks of the button
There are two things that help here:
making use of the JS toggle function on an element's classList
CSS transform translate which will move an element without altering the layout of anything else
The JS is reduced to:
function toggleBar() {
document.body.classList.toggle("hidebar");
}
and the CSS has this added:
.hidebar div.bar {
display: none;
}
body:not(.hidebar) div.btn-wrapper {
transform: translateY(20px);
}
You can use a different ancestor which is common to both bar and button if you prefer. body is just easy to use.
function toggleBar() {
document.body.classList.toggle("hidebar");
}
body {
padding: 0;
margin: 0;
}
.bar {
height: 20px;
background: red;
position: fixed;
top: 0;
width: 100%;
}
.btn-wrapper {
margin-top: 10px;
}
.logo {
border: 1px solid;
margin-top: 20px;
}
.hidebar div.bar {
display: none;
}
body:not(.hidebar) div.btn-wrapper {
transform: translateY(20px);
}
<!--
This bar should appear/hide conditionally on click Toggle Bar button.
It will be always on top and not scrollable
-->
<div class="bar" id="bar">
</div>
<!--
This should have top space of 10px from red bar when red bar is displayed and when red bar is hidden, the top space of 10px should be there from window.
This should be scrollable
-->
<div class="btn-wrapper">
<button onclick="toggleBar();">Toggle Bar</button>
</div>
<!--
This should have same consistent space from window top whether the red bar is present or not.
This should be scrollable.
-->
<div class="logo">
Logo
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
</div>

Answer 4

You can try changing position: fixed; to position: sticky; on your .bar class CSS code. After that, to prevent the logo from moving, add the following CSS code:
.bar[style='display: block;'] ~ .logo {
margin-top: 0px;
}
This should remove the margin from your logo upon detecting a visible .bar element before it.

Answer 5

Doing this with only CSS is a bit tricky. But, luckily, position: fixed gives a way out.
Just because it's in the top doesn't mean it has to be the first element.
body {
padding: 0;
margin: 0;
}
#top_wrapper {
min-height: 95px;
}
#togglebutton {
position: absolute;
margin: 0;
padding: 0;
width: 0;
height: 0;
visibility: hidden;
}
#togglebutton_label {
display: inline-block;
margin-top: 30px;
}
#togglebutton_label button {
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
.bar {
height: 20px;
background: red;
position: fixed;
top: 0;
width: 100%;
}
.logo {
border: 1px solid;
margin-top: 20px;
}
#togglebutton:checked ~ #bar {
display: none;
}
#togglebutton:checked + #togglebutton_label {
margin-top: 10px;
}
<div id="top_wrapper">
<input type="checkbox" id="togglebutton">
<label id="togglebutton_label" for="togglebutton">
<button>Toggle Bar</button>
</label>
<div class="logo">
Logo
</div>
<div class="bar" id="bar"></div>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, facere? Accusamus expedita excepturi placeat corporis culpa quod earum in nam, maxime odit sed facilis natus eligendi itaque nesciunt numquam accusantium non minus pariatur optio? Autem consequatur atque dolores dicta molestias!
</p>
</div>
I wrapped the bar, the button and the logo in a div, where the button is first.
The button is in a label that's connected to an invisible checkbox.
Clicking the button sets the checkbox and then a selector can affect the following bar element.