Home / Questions / 554498
Accepted
Narciso Aifuz
Asked: 2022-08-31 09:21:53 +0800 CST 2022-08-31 09:21:53 +0800 CST

Change styles by scrolling using outerHeight, along with div fixed and another div sticky

  • 772

I am creating a visible and hidden effect of a div fixedby doing scroll. In conjunction with the headerand another div sticky.

Fixed div is hidden when scrolling but when finished displaying the header: using outerHeight.

What I can't do is change the background color of the fixed div while it's visible ( top: 0) but after passing the header. Being on the header, it must have a transparent background (or be able to add other styles).

My problem is not to apply the style with classList.addor style.background = ""but, how to capture the moment when it is visible but outside the header.

For example I want this: if the scroll is greater than the header, then apply background color to the fixed divo (which is visible)

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

UPDATED

Apart from changing the background color (which I can achieve), I need it to headlandbe visible along with the navigation ( sticky) when scrolling top(up), but not while it headeris 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>

javascript

3 Answers

  1. With this function I solved a somewhat similar situation.

    $(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");
            }  
        }
  });
});

    What this does is when the scroll passes the header, the navigation bar changes color. But you can add many more things to them.

    • 3
  2. Best Answer

    The case has the following parts

    • When headland is in the header
    • When headland is outside the header
      • with scroll up
      • With scroll down

    IntersectionObserver It is able to determine when an element comes or goes on the screen. So the logic is: if header is off screen, then headland is off the header. I use it this way because it works regardless of the size of the header, that is, it is not necessary to calculate the height. This is saved in the variable "activate"

    enable = true => Headland outside header enable = false => Headland inside header

    Then with the scroll event, it's time to determine when it goes up or down and what to do in each case.

    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>

    • 2

  3. Let's see if I understand: What you want is to headlandkeep it visible after the scroll hides the header, but with a different background color, and to hide when you reach the end of the page.

    If that's the case, you just need to take the height of the header to add another conditional; check the comments in the code to see the changes.

    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