How to use javascript to automatically grab the height of elements to change the CSS style?

Question

I am a javascript beginner, I have a question to ask everyone!

Today I have a project, such as the CSS setting of the gray block demo in the screen using position: fixed; fixed in the screen! There are three blocks at the top, namely a, b, and c, but sometimes the a block will display: none; that is, it will disappear.

But my gray block always needs to be fixed below the c blue block!

The way I thought of was to use javascript to capture the height of the three blocks a, b, and c, and then change the top value in the demo! I wonder if this idea is feasible?

But I wrote an example the way I know, but why didn't the effect come out? Is my CSS syntax wrong?

Hope to get your help, thank you.

 let a = document.querySelector('.a').offsetHeight; let b = document.querySelector('.b').offsetHeight; let c = document.querySelector('.c').offsetHeight; let demo = document.querySelector('.demo'); let all_height = a+b+c; demo.style.top = all_height+"px";

 body { display: flex; justify-content: center; } .wrap { width: 100%; background-color: #fff; text-align: center; border: 1px solid #222; height: 800px; } .wrap .a { left: 0px; right: 0px; height: 30px; background-color: #ffdd00; } .wrap .b { height: 80px; background-color: #fbb034; } .wrap .c { height: 100px; background-color: #00a4e4; } .wrap .demo { position: fixed; top: 210px; left: 0px; right: 0px; height: 60px; line-height: 60px; background-color: #ccc; text-decoration: none; color: #222; font-size: 30px; font-weight: 900; } .wrap .select { position: absolute; top: 260px; }

 <div class="wrap"> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div> <a href="javascript:;" class="demo">Fixed block</a> </div>

Answer 1

EDIT: Here it is but you should make a js function that do a loop of elements with .d class and get the sum of their height. I will count automatically rather than a+b+c

But my gray block always needs to be fixed below the c blue block!

This way you can show C block

 let a = document.querySelector('.a').offsetHeight; let b = document.querySelector('.b').offsetHeight; let c = document.querySelector('.c').offsetHeight; let demo = document.querySelector('.demo'); let all_height = a+b+c; demo.style.top = all_height+"px"; demo.innerText = all_height;

 body { display: flex; justify-content: center; } .wrap { width: 100%; background-color: #fff; text-align: center; border: 1px solid #222; height: 800px; } .wrap .a { left: 0px; right: 0px; height: 20px; background-color: #ffdd00; } .wrap .b { height: 150px; background-color: #fbb034; } .wrap .c { height: 30px; background-color: #00a4e4; } .wrap .demo { position: fixed; top: 0px; left: 0px; right: 0px; height: 60px; line-height: 60px; background-color: #ccc; text-decoration: none; color: #222; font-size: 30px; font-weight: 900; } .wrap .select { position: absolute; top: 260px; }

 <div class="wrap"> <div class="ad">A</div> <div class="bd">B</div> <div class="cd">C</div> <a href="javascript:;" class="demo">Fixed block</a> </div>

Answer 2

The idea is I guess when you scroll down a fixed block to stand fixed at the top, I might be mistaken ..

First I want to mention that as a beginner it is good to follow good conventions. Use const instead of let, unless you re-assign value. Use CamelCase convention when declaring variables.

HTML

<div class="wrap">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <a href="javascript:;" class="demo">Fixed block</a>
</div>

CSS

body {
  display: flex;
  justify-content: center;
}

.wrap {
  width: 100%;
  background-color: #fff;
  text-align: center;
  border: 1px solid #222;
  height: 800px;
}
.wrap .a {
  left: 0px;
  right: 0px;
  height: 30px;
  background-color: #ffdd00;
}
.wrap .b {
  height: 80px;
  background-color: #fbb034;
}
.wrap .c {
  height: 100px;
  background-color: #00a4e4;
}
.wrap .demo {
  display:block;
 width:100%;
  height: 60px;
  line-height: 60px;
  background-color: #ccc;
  text-decoration: none;
  color: #222;
  font-size: 30px;
  font-weight: 900;
}
.wrap .select {
  position: absolute;
  top: 260px;
}

.fixed-top{
  position:fixed;
  top:0;
}

JavaScript

const a = document.querySelector('.a').offsetHeight;
const b = document.querySelector('.b').offsetHeight;
const c = document.querySelector('.c').offsetHeight;
const demo = document.querySelector('.demo');
const allHeight = a+b+c;


window.addEventListener('scroll', function() {
          const position = window.pageYOffset;
           position> allHeight 
         ?  demo.classList.add('fixed-top')
         :  demo.classList.remove('fixed-top')
                  
});

link to jsfiddle -> https://jsfiddle.net/Markov88/34dawz9k/36/