-2

Boa tarde! Estou precisando que, ao rolar a página do meu site pela barra de rolagem ou scroll do mouse, a logotipo seja substituida.

Minha logo está inserida na página por meio de uma classe no bootstrap.css Segue:

.logo1{
    background: url(../img/logoo.png) no-repeat;
    height: 164px;
    width: 172px;
    padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
    float: left;
    position: absolute;

}

.logo2{
    background: url(../img/logoclube.png) no-repeat;
    height: 78px;
    width: 61px;
    padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
    float: left;
    position: absolute;

}

O que eu preciso é que, ao rolar a página, a classe chamada .logo1 seja substituída pela classe .logo2 e consequentemente a imagem original da página inicial seja substituida.

2 Respostas 2

0

Poderá explorar outras formas, mas utilizando as funções jQuery .scroll(), .removeClass() e .addClass(), poderá solucionar o problema:

<script>
$(document).ready(function(){
    $(window).scroll(function() {
       $('.logo1').removeClass('logo1').addClass('logo2');  
    });
});
</script>

No seu html adicione o script jQuery antes de qualquer código javascript:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-1

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:

  1. 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>
  1. 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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .