Soy un principiante de javascript, ¡tengo una pregunta para todos!
Hoy tengo un proyecto, como la configuración de CSS de la demostración del bloque gris en la pantalla usando position: fixed; fijado en la pantalla! Hay tres bloques en la parte superior, a saber, a, b y c, pero a veces el bloque a mostrará: ninguno; es decir, desaparecerá.
¡Pero mi bloque gris siempre debe arreglarse debajo del bloque c azul!
¡La forma en que pensé fue usar javascript para capturar la altura de los tres bloques a, b y c, y luego cambiar el valor superior en la demostración! Me pregunto si esta idea es factible.
Pero escribí un ejemplo de la manera que sé, pero ¿por qué no salió el efecto? ¿Es incorrecta mi sintaxis CSS?
Espero contar con su ayuda, gracias.
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>EDITAR: Aquí está, pero debe hacer una función js que haga un bucle de elementos con la clase .d y obtenga la suma de su altura. Contaré automáticamente en lugar de a+b+c
¡Pero mi bloque gris siempre debe arreglarse debajo del bloque c azul!
De esta manera puedes mostrar el bloque 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>Supongo que la idea es que cuando te desplazas hacia abajo en un bloque fijo para quedar fijo en la parte superior, podría estar equivocado.
Primero quiero mencionar que como principiante es bueno seguir buenas convenciones. Use const en lugar de let, a menos que vuelva a asignar valor. Utilice la convención CamelCase al declarar 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') });enlace a jsfiddle -> https://jsfiddle.net/Markov88/34dawz9k/36/