5

Boa tarde gostaria de saber se a alguma maneira de mudar a cor de um menu flutuante num template one page dependendo a secção da pagina onde se encontramos. Como neste exemplo:

http://ironsummitmedia.github.io/startbootstrap-creative/

Mas sem usar o Bootstrap pois gostaria de ficar com o meu menu original

2 Respostas 2

2

Cria uma classe CSS com a cor que queres e que aplica os efeitos que queres. Depois tens de medir o Scroll e decidir a partir de que valor aplicar essa classe.

Em JavaScript nativo isso seria assim:

(function () {
    var menu = document.getElementById('menu'); // colocar em cache
    window.addEventListener('scroll', function () {
        if (window.scrollY > 0) menu.classList.add('menuFixo'); // > 0 ou outro valor desejado
        else menu.classList.remove('menuFixo');
    });
})();

CSS

.menuFixo {
    position: fixed;
    top: 0px;
    background-color: #ccf;
}

jsFiddle: http://jsfiddle.net/k343a9fb/

A razão de usar (function () { ... })(); é porque dessa maneira podemos colocar em cache o elemento menu, sem exportar para o espaço global, e poupar recursos uma vez que o evento scroll é disparado muitas vezes.

2

Você precisa utilizar o evento scroll do objeto window, e o método scrollTop para capturar a posição:

$(window).scroll(function() { 
    var scroll = $(window).scrollTop();

    if (scroll > 500) {
        $('.menu').css('background-color','yellow');
    } else {
        $('.menu').css('background-color','blue');
    }
});

Exemplo funcionando no JSFiddle.

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 .