Para realizar a troca da classe .logo1
pela classe .logo2
ao rolar a página, você precisará usar JavaScript para detectar quando a rolagem ocorre e, em seguida, modificar a classe do elemento que contém a logo. Aqui está um exemplo de como você pode fazer isso:
- Primeiro, você precisará adicionar um ID ao elemento que contém a logo para que seja mais fácil de selecioná-lo com JavaScript. Vou assumir que esse elemento tem a tag
<div>
com o ID "logo-container":
<div id="logo-container" class="logo1"></div>
- Em seguida, você pode usar JavaScript para ouvir o evento de rolagem e fazer a troca das classes quando a página for rolada. Aqui está um exemplo de como você pode fazer isso:
<script>
document.addEventListener("DOMContentLoaded", function() {
const logoContainer = document.getElementById("logo-container");
const logo1Class = "logo1";
const logo2Class = "logo2";
const scrollThreshold = 100; // Define a quantidade de rolagem em pixels para a troca de classes
// Função para trocar as classes de logo ao rolar a página
function handleScroll() {
if (window.scrollY >= scrollThreshold) {
logoContainer.classList.remove(logo1Class);
logoContainer.classList.add(logo2Class);
} else {
logoContainer.classList.remove(logo2Class);
logoContainer.classList.add(logo1Class);
}
}
// Adicionar ouvinte de evento de rolagem
window.addEventListener("scroll", handleScroll);
});
</script>
Neste exemplo, a função handleScroll()
é chamada sempre que ocorre uma rolagem na página. Ela verifica a posição vertical de rolagem (window.scrollY
) e, se essa posição for maior ou igual ao valor definido em scrollThreshold
, ela substitui a classe .logo1
pela classe .logo2
. Caso contrário, ela faz a substituição inversa.
Certifique-se de incluir esse código JavaScript após o elemento <div>
que contém a logo e a tag <script>
que carrega o Bootstrap CSS no seu arquivo HTML.
Lembre-se de ajustar o valor de scrollThreshold
de acordo com a quantidade de rolagem em pixels que você deseja que ocorra antes da troca das classes. Experimente diferentes valores para encontrar o que melhor se adapta ao seu layout.