[英]How to use javascript to automatically grab the height of elements to change the CSS style?
I am a javascript beginner, I have a question to ask everyone!我是javascript初学者,有个问题想请教大家!
Today I have a project, such as the CSS setting of the gray block demo in the screen using position: fixed;今天有一个项目,比如屏幕中灰块demo的CSS设置使用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;顶部有三个块,分别是a、b和c,但有时a块会显示:none; that is, it will disappear.也就是说,它会消失。
But my gray block always needs to be fixed below the c blue block!但是我的灰块总是需要固定在c蓝块下面!
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!我想到的方法是用javascript来捕捉a、b、c这三个块的高度,然后在demo中改变top值! 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?我的 CSS 语法错了吗?
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.编辑:在这里,但您应该制作一个 js 函数,该函数使用.d
类执行元素循环并获取它们的高度总和。 I will count automatically rather than a+b+c我会自动计数而不是 a+b+c
But my gray block always needs to be fixed below the c blue block!但是我的灰块总是需要固定在c蓝块下面!
This way you can show C block这样你就可以显示 C 块
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>
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.使用 const 而不是 let,除非您重新分配值。 Use CamelCase convention when declaring variables.声明变量时使用 CamelCase 约定。
HTML 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 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 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/链接到 jsfiddle -> https://jsfiddle.net/Markov88/34dawz9k/36/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.