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>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="a d">A</div>
<div class="b d">B</div>
<div class="c d">C</div>
<a href="javascript:;" class="demo">Fixed block</a>
</div>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/