como funciona um section menu

[wneo 5]

Boa noite!!

 

Estou montando um site no estilo OnePage Layout, e nesse site quero utilizar um menu que atribui uma classe ao titulo do menu de acordo com a seção que o usuario estiver, conforme o usuario rola o scroll.

 

Por exemplo, o site possui 3 partes (3sections).

O menu fica linkado para cada parte na msma pagina, fazendo um enlace smooth quando eh clicado...Até aqui tranquilo...

 

Agora o que preciso:

Quando o usuario vai rolando o scroll para baixo ou para cima, o menu recebe destaque no link da seção relativa a ele - Alguem sabe como funciona esse mecanismo? (sei que existem plugins para isso.. mas quero entender o mecanismo do JS para q eu possa ter controle total do desenvolvimento).

 

Vou colocar aqui a ideia da estrutura:

<style>
.active{
background:#c12;
}

.nav{border:1px solid #000000;}
#meuMenu{position:fixed;}

.sections{margin:110 0 0 0;position:absolute;height:1000;width:950;border:1px solid #000000;}
.section{
    border:4px solid #bbb;
    height:1000;
    text-align:center;    
}
</style>


<div id="meuMenu">

<div class="nav">
<ul>
<li>SecMenu1</li>
<li>SecMenu2</li>
<li>SecMenu3</li>
</ul>
</div><!-- /nav-->
</div><!-- /meuMenu-->

<div class="sections">
<div class="section" id="sec1">olá1</div><!--/sec1-->
<div class="section" id="sec2">olá2</div><!--/sec2-->
<div class="section" id="sec3">olá3</div><!--/sec3-->
</div><!-- /sections -->

Alguem sabe como fica o js para esse objetivo?

 

tentei algo assim:

$(document).ready(function(){ 



function addClass(el) {
    menu.removeClass('active');
    $(el).addClass('active');
};

var menu = $('#meuMenu .nav li');
var sectionPositions = $('section').map(function(){
    return $(this).position().top;
});
var sections = $('section');
$(document).on('scroll', function () {
    var scroll = $(document).scrollTop();
    var currentElement;
    $(sectionPositions).each(function (i) {
        if (scroll > this - 50) currentElement = menu[i];
    });
    currentElement && addClass(currentElement);
});
menu.on('click', function () {
    addClass(this);
});


});

Mas não ocorreu o efeito de atribuir a classe active para o respectivo li...

[angelorubin 142]

Uma dúvida, você quer que ao rolar a pagina para baixo o menu se fixe no topo, pois se isso não acontecer ele irá ficar escondido, concorda?

[angelorubin 142]

Eu ainda aconselho a utilizar um plugin, mas caso seja para fins de aprendizado, segue uma idéia - http://jsfiddle.net/angelorubin/8j82ub55/

[Back-on 14]

Cara, não use no document.ready, utilize isso no window.scroll. Segue um fiddle de exemplo.

Também, é legal usar o offset ao invés do position. Pois o offset retorna a posição de acordo com o documento e o position em relação ao pai do elemento.

 

http://jsfiddle.net/93y8f76w/

[wneo 5]

Uma dúvida, você quer que ao rolar a pagina para baixo o menu se fixe no topo, pois se isso não acontecer ele irá ficar escondido, concorda?

Sim, o menu ficara com position fixed

Cara, não use no document.ready, utilize isso no window.scroll. Segue um fiddle de exemplo.

Também, é legal usar o offset ao invés do position. Pois o offset retorna a posição de acordo com o documento e o position em relação ao pai do elemento.

 

http://jsfiddle.net/93y8f76w/

Não está aparecendo os itens do menu.

Vou utilizar o window.scroll para implementar

Vou tentar aplicar de acordo com os exemplos, retorno em breve :)

[wneo 5]

Ainda está bem confuso...esse estudo não eh soh para fim de estudo.. e sim para desenvolvimento msmo. Usar algum framework ou algo pronto, eh um atalho q se torna um caminho mais longo quando nos deparamos com a necessidade de autenticidade e recursos encomendados do projeto que se está trabalhando...

 

gostaria de entender a lógica de aplicação da classe ao menu conforme rolamos o scroll...

uma forma de montar o script como:

 

window.scroll(){

/*margin-top:900.addClass(cor_doMenu)*/

}

 

compreendem?

[Back-on 14]

Sim, o menu ficara com position fixed

Não está aparecendo os itens do menu.

Vou utilizar o window.scroll para implementar

Vou tentar aplicar de acordo com os exemplos, retorno em breve :)

 

Eu não utilizei o item do menu, e sim uma barra fixa encima para você ver que ao mudar de sessão a barra muda de cor.

 

Cara, pense no seguinte, você obtem um offset().top de uma section, e ao dar scroll verificar se o scroll é maior que o offset().top dessa section, se for, adicionar a classe, caso contrário não faz nada.

 

Vou explicar com o código do fiddle que fiz:

 

Faz uma ação ao dar scroll

$(window).scroll(function()
{
});

Distância do scroll em relação ao topo da página.

$(this).scrollTop();

Distância da div em relação ao topo da página

$("div.filho.um").offset().top

Se a distância do scroll for maior que a distância da div em relação do topo, altere a cor da barra do menu.

if($(this).scrollTop() >= $("div.filho.um").offset().top && $(this).scrollTop() < $("div.filho.dois").offset().top)
    {
        $("div.menu").css('background', '#16a085');
    }

Cara, eu fiz isso que você está querendo neste site.

[wneo 5]

 

Eu não utilizei o item do menu, e sim uma barra fixa encima para você ver que ao mudar de sessão a barra muda de cor.

 

Cara, pense no seguinte, você obtem um offset().top de uma section, e ao dar scroll verificar se o scroll é maior que o offset().top dessa section, se for, adicionar a classe, caso contrário não faz nada.

 

Vou explicar com o código do fiddle que fiz:

 

Faz uma ação ao dar scroll

$(window).scroll(function()
{
});

Distância do scroll em relação ao topo da página.

$(this).scrollTop();

Distância da div em relação ao topo da página

$("div.filho.um").offset().top

Se a distância do scroll for maior que a distância da div em relação do topo, altere a cor da barra do menu.

if($(this).scrollTop() >= $("div.filho.um").offset().top && $(this).scrollTop() < $("div.filho.dois").offset().top)
    {
        $("div.menu").css('background', '#16a085');
    }

Cara, eu fiz isso que você está querendo neste site.

hmmm, entendi!

Ficou mais claro para mim..obrigado! :yes:

[angelorubin 142]

E não era a mesma coisa que eu já tinha lhe mostrado aqui neste exemplo? - http://jsfiddle.net/angelorubin/8j82ub55/