2

Eu tenho o código em baixo e estou a tentar que os elementos li fiquem com a classe active dependendo do scroll (efeito parallax), tudo funciona bem (funções click para o scroll) exceto isso. Se souberem de alguma maneira melhor de fazer isto partilhem por favor.

HTML:

<div id="wrapper">

    <nav>
        <ul>
            <li>
                section1
            </li>
            <li>
                section2
            </li>
            <li>
                section3
            </li>
            <li>
                section4
            </li>
        </ul>
    </nav>

    <div id ="section1">
        <p>vccvfcwec</p>
    </div>

    <div id ="section2">
        <p>vccvfcwec</p>
    </div>

    <div id ="section3">
        <p>vccvfcwec</p>
    </div>

    <div id ="section4">
        <p>vccvfcwec</p>
    </div>

</div>

jQuery:

$('ul li:eq(0)').click(function() {
    $('html, body').animate({
        scrollTop: $("#section4").offset().top
    }, 1500);
});
$('ul li:eq(1)').click(function() {
    $('html, body').stop().animate({
        scrollTop: $("#section3").offset().top
    }, 1500);
});
$('ul li:eq(2)').click(function() {
    $('html, body').stop().animate({
        scrollTop: $("#section2").offset().top
    }, 1500);
});
$('ul li:eq(3)').click(function() {
    $('html, body').stop().animate({
        scrollTop: $("#section1").offset().top
    }, 1500);
});

var section1Height = $('#section1').height();
var section2Height = $('#section2').height();
var section3Height = $('#section3').height();
var section4Height = $('#section4').height();

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

    if(winTop > section1Height && winTop <= section2Height){
        $('ul li:eq(0)').addClass('active').not().removeClass('active');
    }
    else if(winTop > section2Height && winTop <= section3Height){
        $('ul li:eq(1)').addClass('active').not().removeClass('active');
    } 
    else if(winTop > section3Height && winTop <= section4Height){
        $('ul li:eq(2)').addClass('active').not().removeClass('active');
    }
    else if(winTop > section4Height){
        $('ul li:eq(3)').addClass('active').not().removeClass('active');
    }
});

CSS:

    .active {
    color:#fff !important;
}

#wrapper {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
}
#section1{
    width: 100%;
    height: 2000px;
    position: relative;
    background-color: yellow;
}
#section2 {
    width: 100%;
    position: relative;
    height: 2500px;
    background-color:red;
}
#section3{
    width: 100%;
    position: relative;
    height: 1500px;
    background-color: green;
}
#section4{
    width: 100%;
    position: relative;
    height: 1500px;
    background-color: blue;
}
nav ul {
    border: 1px solid;
    margin: 0;
    background-color: #222;
    height: 80px;
    margin: 0 0 90px;
    width: 100%;
    max-width: 1024px;
    position: fixed;
    z-index: 1;
}
nav ul li {
    list-style: none;
    margin: 30px 20px 30px 20px;
    display: inline;
    cursor: pointer;
    float: right;
}
nav ul li {
    color: #B5B5B5;
    text-decoration: none;
}

1 Resposta 1

1

Se eu compreendí bem o seu problema cada secção deve ter o seu texto a amarelo quando o scroll lá chegar, ou seja quando essa secção estiver +/- no meio do ecrã. Aqui fica um exemplo que funciona no jsFiddle mas tem de ser adaptado ao seu código que está incompleto aqui na pergunta.

A minha ideia é:

  • colocar em cache todas as secções cuja ID começa com "section" e que são descendentes de #wrapper
  • percorrer essa escolha e guardar varios objetos com a sua altura e uma referencia ao proprio objeto.
  • dentro do for percorrer todos os elementos. O primeiro que tiver posicao maior que o wintop faz o ciclo parar e vai buscar o li correspondente para lhe dar uma classe

Código

function animarScroll(altura) {
    $('html, body').stop().animate({
        scrollTop: altura
    }, 1500);
}

var ecra = $(document).height();
var seccoes = $('#wrapper div[id^=section]');
var lis = document.querySelectorAll('#wrapper li');
var alturas = seccoes.map(function (i) {
    return {
        elemento: lis[i],
        posicao: $(this).position().top + $(this).outerHeight(true)
    }
});

$('ul li').each(function (i, el) {

    $(el).click(function () {
        var posicaoSeccao = alturas[alturas.length - i].posicao;
        animarScroll(posicaoSeccao)
    });
});

$(window).scroll(function () {
    var winTop = $(window).scrollTop();
    for (var i = 0; i < alturas.length; i++) {
        var este = alturas[i];
        if (este.posicao > winTop) {
            $(lis).removeClass('active');
            $(alturas[i].elemento).addClass('active');
            break;
        }
    }
});

Exemplo

7
  • @Miguel, pode colocar aqui o seu CSS todo, ou o conteúdo das div? Como está (tudo vazio) nem precisa de scroll...
    – Sergio
    Commented 9/04/2014 às 17:17
  • Antes de mais, muito obrigado @sergio. Eu implementei o codigo tal e qual você o escreveu, é suposto modificar alguma coisa para implementar no meu código? não está a funcionar e eu acho que é por causa do selector "$('#wrapper div[id^=section]')" pois assim, está a por as tags 'p' com a classe 'active' em vez do 'li' correspondente à secção em que estamos. Dsculpe o incómodo, mas podia ajudar-me aqui sff. O CSS está acima
    – Miguel
    Commented 9/04/2014 às 17:24
  • Desculpe @sergio mas o que está a ficar com a classe 'active' mesmo no seu exemplo é o que está dentro da tag 'p' (texto) e não o 'li' correspondente, o que eu queria é que o elemento 'li' correspondente à secção onde estamos ficasse com a classe
    – Miguel
    Commented 9/04/2014 às 17:36
  • Exactamente @sergio, so falta mesmo que faça tb o removeClass qd saíssemos da secção, hightlight a secção onde estamos na navbar
    – Miguel
    Commented 9/04/2014 às 18:04
  • Muito Obrogado @sergio, é isso mesmo
    – Miguel
    Commented 9/04/2014 às 18:14

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 .