2

Estoy creando un efecto visible y oculto de un div fixed al hacer scroll. En conjunto con el header y otro div sticky.

El div fijo se oculta al hacer scroll pero al terminar de visualizar el header: usando outerHeight.

Lo que no logro es cambiar el color de fondo del div fijo mientras que sea visible (top: 0) pero después de pasar el header. Estando sobre el header este debe ser de fondo transparente (o poder agregar otros estilos).

Mi problema no es aplicar el estilo con classList.add o style.background = "" sino, como capturar el momento cuando esté visible pero fuera del header.

Por ejemplo quiero esto: si el scroll es mayor al header, entonces aplicar color de fondo al divo fijo (que es visible)

if ( scroll > header ) headland.style.background = "red"

ACTUALIZADO

A parte de que se cambie el color de fondo (lo cual puedo lograr), necesito que headland sea visible junto con la navegación (sticky) al hacer scroll top (hacia arriba), pero no durante que el header sea visible

document.addEventListener("DOMContentLoaded", () => { 

let scroll = window.pageYOffset,
    headland = document.querySelector(".headland"),
    navegacion = document.querySelector(".navegacion"); 

window.addEventListener("scroll", () => {
    
    let s = window.pageYOffset,
        w = window.outerHeight - 70;
    
    if(scroll < s && s > w) {
        
        headland.classList.add("top");
        //headland.classList.add("fondo");
        navegacion.classList.remove("top"); 
        
    } 
    
    /* else if(scroll > w) {
        headland.classList.add("fondo");
    } */
    
    else {
        
        headland.classList.remove("top");
        headland.classList.remove("fondo");
        navegacion.classList.add("top"); 
        
        
    }
    
    scroll = s;

});

});
* {
box-sizing: border-box
}

:root {
--height: 50px;
--transicion: all 0.3s ease-in-out;
--color: lightblue;
--fondoVerde: rgb(47, 79, 79);
--fondoNegro: rgb(0, 0, 0);
--fondoVerdeTransparente: rgba(47, 79, 79, 0.5);  
}

html {
scroll-behavior: smooth
}

body {
margin: 0;
padding: 0;
font-size: 16px;
background-color: whitesmoke
}

.headland, header, .navegacion {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin: 0;
padding: 1rem 1rem;
}

.headland {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: var(--height);
transition: var(--transicion);
color: var(--color);
box-shadow: 0 0 7px #ccc;
background-color: transparent;
backdrop-filter: blur(3px)
} .headland.top {
top: -50px;
} .headland.fondo {
background-color: var(--fondoVerde)
}

header {
position: relative;
height: 100vh;
color: var(--color);
background-color: var(--fondoNegro)
}

.navegacion {
position: sticky;
top: 0;
z-index: 1001;
transition: var(--transicion);
background-color: var(--fondoVerdeTransparente); 
backdrop-filter: blur(3px)
} .navegacion.top {
top: var(--height)
}

.navegacion button {
margin: auto
}

main {
min-height: 1000px
}
<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
    <title>Scroll</title>  
</head>
<body>
    
    <div class="headland" id="headland">
        <h1>Página de prueba</h1>
    </div>
    
    <header>
        <h1>Header</h1> 
    </header>
    
    <div class="navegacion" id="navegacion">
        <button>Botón</button>
        <button>Botón</button>
        <button>Botón</button>
    </div>
    
    <main></main>
    
</body>
</html>

1
  • En tu actualización pones: "... pero no durante que el header sea visible" Esto no se entiende
    – Yussef
    el 26 sep. 2022 a las 10:42

3 respuestas 3

3

Con esta función yo resolví una situación algo parecida.

$(function () {
  var navigation = $("#navbar"); 

  $(window).scroll(function () {    
        var navheight = $("#navbar").height();
        var headheight = document.getElementById('header');  
        if (headheight) {  
            headheight = headheight[0].clientHeight;
            var scroll = $(window).scrollTop();
            if (scroll >= headheight - navheight) {
                navigation.addClass("bg-blue");
                navigation.removeClass("bg-blue-05");
            } else {
                navigation.removeClass("bg-blue");
                navigation.addClass("bg-blue-05");
            }  
        }
  });
});

Esto lo que hace es cuando el scroll pasa el header la barra de navegación cambie de color. Pero puede agregarles muchas mas cosas.

2
+100

El asunto tiene las siguientes partes

  • Cuando headland está en el header
  • Cuando headland está fuera del header
    • Con scroll hacia arriba
    • Con scroll hacia abajo

IntersectionObserver Es capaz de determinar cuándo un elemento sale o entra en pantalla. Entonces la lógica es: si header está fuera de pantalla, es que headland está fuera del header. Lo ocupo de esta manera porque funciona sin importar el tamaño de header, es decir, no es necesario calcular la altura. Esto se guarda en la variable "activar"

activar = true => Headland fuera del header activar = false => Headland dentro del header

Luego con el evento scroll, toca determinar cuando sube o baja y que hacer en cada caso.

const header = document.querySelector("header");
const headland = document.querySelector("#headland");
const navegacion = document.querySelector("#navegacion");
let activar = false; // false: si headland está en el header, true si ha salido
const observer = new IntersectionObserver(
    ([e]) => {
        if (e.intersectionRatio < 0.1) {
            activar = true;
        }
        else {
            activar = false;
        }
    }
    ,{ threshold: 0.1 }
);

observer.observe(header);

document.addEventListener("DOMContentLoaded", () => {
    let oldScroll = 0; //para daterminar la direccion
    let altura = headland.getClientRects()[0].height;//altura de headland

    window.addEventListener("scroll", (e) => {
        if(activar)
        {
           if (oldScroll > this.scrollY) { //scroll hacia arriba
               headland.style.top = "0px";
               navegacion.style.top = altura + "px"
           }
           else{ //scroll hacia abajo
                headland.style.top = -altura + "px";
                navegacion.style.top =  "0px"
           }
        }
        else{ //restaurar posiciones cuando vuelve a pantalla el header
            headland.style.top = "0px";
            navegacion.style.top = "0px";
        }
        oldScroll = this.scrollY;
    });
});
        * {
            box-sizing: border-box
        }

        :root {
            --height: 50px;
            --transicion: all 0.3s ease-in-out;
            --color: lightblue;
            --fondoVerde: rgb(47, 79, 79);
            --fondoNegro: rgb(0, 0, 0);
            --fondoVerdeTransparente: rgba(47, 79, 79, 0.5);
        }

        html {
            scroll-behavior: smooth
        }

        body {
            margin: 0;
            padding: 0;
            font-size: 16px;
            background-color: whitesmoke
        }

        .headland, header, .navegacion {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            margin: 0;
            padding: 1rem 1rem;
        }

        .headland {
            position: sticky;
            z-index: 1000;
            top: 0;
            left: 0;
            height: var(--height);
            transition: var(--transicion);
            color: var(--color);
            box-shadow: 0 0 7px #ccc;
            background-color: red;
            backdrop-filter: blur(3px)
        }

            .headland.top {
                top: -50px;
            }

            .headland.fondo {
                background-color: var(--fondoVerde)
            }

        header {
            position: relative;
            height: 50vh;
            color: var(--color);
            background-color: var(--fondoNegro);
        }

        div {
            height: 50px !;
        }

        .navegacion {
            position: sticky;
            top: 0;
            z-index: 1001;
            transition: var(--transicion);
            background-color: var(--fondoVerdeTransparente);
            backdrop-filter: blur(3px)
        }

            .navegacion.top {
                top: var(--height)
            }

            .navegacion button {
                margin: auto
            }

        main {
            min-height: 10000px
        }

        .no-sticky {
            background-color: forestgreen;
        }

        .headertop {
            background-color: var(--fondoNegro)
        }
<div class="headland" id="headland">
        <h1>Página de prueba</h1>
    </div>
    <header>
        <h1>Header</h1> 
    </header>



<div class="navegacion" id="navegacion">
    <button>Botón</button>
    <button>Botón</button>
    <button>Botón</button>
</div>
<main>

</main>

12
  • No aparece el headland al hacer scroll hacia arriba. Eso es lo queisiera el 25 sep. 2022 a las 21:26
  • @NarcisoAifuz Para confirmar: Al hacer scroll hacia abajo no mostrar headland, y con scroll hacia arriba si debe mostrar headland ???? es así?
    – Yussef
    el 26 sep. 2022 a las 3:19
  • así es. Solo quiero que esté fijo sobre el header. Pero luego, que se mueva con la navegación "sricky" ... el 26 sep. 2022 a las 11:00
  • @NarcisoAifuz Favor valida esta nueva demo
    – Yussef
    el 26 sep. 2022 a las 14:26
  • 1
    @Triby Lo que pasa es que ya publiqué otra respuesta, pero no había entendido bien el problema, por eso le pido a Narciso que me indique si esto es lo que busca y si es así vuelvo a editar, ya explicando bien el asunto
    – Yussef
    el 27 sep. 2022 a las 17:46
1

A ver si entendí: Quieres es que headland se mantenga visible después de que el desplazamiento oculta el encabezado, pero con otro color de fondo, y que se oculte al llegar al final de la página.

Si ese es el caso, solo necesitas tomar la altura del encabezado para agregar otro condicional; revisa los comentarios en el código para ver los cambios.

document.addEventListener("DOMContentLoaded", () => { 

  // ¿Realmente necesitas la variable scroll? en la función basta con usar s
  let scroll = window.pageYOffset,
    headland = document.querySelector(".headland"),
    header = document.querySelector('header');
    navegacion = document.querySelector(".navegacion"); 

  window.addEventListener("scroll", () => {
    let s = window.pageYOffset,
        w = window.outerHeight - 70;
        // Tomar altura de encabezado, menos altura de headland para aplicar el cambio
        h = header.offsetHeight - headland.offsetHeight;
    if(s > h && s < w) {
        // Cambiar fondo cuando el scroll sobrepase el encabezado, sin llegar hasta abajo
        headland.classList.add('fondo');
    } else if(s > w) {
        // Ocultar cuando el scroll llegue hasta abajo
        headland.classList.add("top");
        navegacion.classList.remove("top"); 
    } else {
        // Mantener formato original
        headland.classList.remove("top");
        headland.classList.remove("fondo");
        navegacion.classList.add("top"); 
    }
  });
});
* {
  box-sizing: border-box;
}

:root {
  --height: 50px;
  --transicion: all 0.3s ease-in-out;
  --color: lightblue;
  --fondoVerde: rgb(47, 79, 79);
  --fondoNegro: rgb(0, 0, 0);
  --fondoVerdeTransparente: rgba(47, 79, 79, 0.5);  
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  background-color: whitesmoke;
}

.headland, header, .navegacion {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 1rem 1rem;
}

.headland {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: var(--height);
  transition: var(--transicion);
  color: var(--color);
  box-shadow: 0 0 7px #ccc;
  background-color: transparent;
  backdrop-filter: blur(3px);
}
.headland.top {
  top: -50px;
}
.headland.fondo {
  background-color: var(--fondoVerde);
}

header {
  position: relative;
  height: 100vh;
  color: var(--color);
  background-color: var(--fondoNegro);
}

.navegacion {
  position: sticky;
  top: 0;
  z-index: 1001;
  transition: var(--transicion);
  background-color: var(--fondoVerdeTransparente); 
  backdrop-filter: blur(3px);
}
.navegacion.top {
  top: var(--height);
}

.navegacion button {
  margin: auto;
}

main {
  min-height: 1000px;
}
<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
    <title>Scroll</title>  
</head>
<body>
    
    <div class="headland" id="headland">
        <h1>Página de prueba</h1>
    </div>
    
    <header>
        <h1>Header</h1> 
    </header>
    
    <div class="navegacion" id="navegacion">
        <button>Botón</button>
        <button>Botón</button>
        <button>Botón</button>
    </div>
    
    <main></main>
    
</body>
</html>

1
  • Esto funciona igual como tengo. Lo que quiero es que sea visible al hacer scroll top tal como es el nav sticky el 25 sep. 2022 a las 21:13

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.