[Resolvido] Menu fixo no topo do site

[marcelo duarte 0]

Galera boa noite, estou desenvolvendo um um site e to com um probleminha, quero fazer um menu como o deste site www.elodigital.cc em que você clicar em algum botão do menu, ele não muda de pagina, apenas este efeito em que o site parece esta rolando sozinho, na verdade eu até ja fiz, só que , não estou conseguindo é este efeito de rolagem, quando eu clico ele não esta rolando, muito pelo contrario ele vai de uma vez, e eu queria que rola-se suavemnete como o exemplo que passei, obrigado espero ter sido claro em minha duvida!

[Diéssica 140]

Marcelo,

não entendi muito a sua dúvida. Você já adicionou o evento, porém o evento não está funcionando, certo? Ou ainda não sabe como fazer e quer o código do evento?

 

É puro JQuery.

[marcelo duarte 0]

Marcelo,

não entendi muito a sua dúvida. Você já adicionou o evento, porém o evento não está funcionando, certo? Ou ainda não sabe como fazer e quer o código do evento?

 

É puro JQuery.

 

Ola Diéssica eu não sabia que é puro jquery, como consigo codigo do evento?

 

[Diéssica 140]

Sim Marcelo, o Javascript/JQuery que faz o efeito.

 

O nome do efeito é JQuery smooth scroll, e é tipo um scroll animado e pode ser tanto horizontal como vertical.

 

Antes de sair copiando o código, é importante que você já tenha os elementos criados (pois basta linkar com #).

 

Segue a função:

	$(function(){			
		$("a[href^=#]").smoothScroll(300,20,20,20)
	})

Essa parte é importante. A linha $("a[href^=#]").smoothScroll(300,20,20,20)determina que todos os links com # serão disparados com o evento, como eu disse acima. Os números que estão dentro dos parenteses determinam alguns valores opcionais:

300 = Duração

20 = Velocidade

20 = Margem esquerda

20 = Margem superior

 

Segue o código que realiza todo o efeito do evento acima:

var scrollInt
var scrTime, scrSt, scrDist, scrDur, scrInt, scrSl, scrDistX

function easeInOut(t,b,c,d)
{
return (c/2 * (1 - Math.cos(Math.PI*t/d)) + B);
}

scrollPage = function()
{
scrTime += scrInt

if (scrTime < scrDur) {
	window.scrollTo(easeInOut(scrTime,scrSl,scrDistX,scrDur), easeInOut(scrTime,scrSt,scrDist,scrDur))
} else {
	window.scrollTo(scrSl+scrDistX, scrSt+scrDist)
	clearInterval(scrollInt)
}
}

jQuery.fn.extend({
smoothScroll : function(duration, velocity, marginLeft, marginTop)
{
	if(typeof(duration) == 'undefined') duration = 500
	if(typeof(velocity) == 'undefined') velocity = 10
	if(typeof(marginLeft) == 'undefined') marginLeft = 0
	if(typeof(marginTop) == 'undefined') marginTop = 0

	this.click(function(){
		var element_id = $(this).attr("href")
		var source_positions = {
			top : $(this).get(0).offsetTop,
			left : $(this).get(0).offsetLeft
		}
		var dest_positions = {
			top : $(element_id).get(0).offsetTop-marginTop,
			left : $(element_id).get(0).offsetLeft-marginLeft
		}

		if (window.scrollY)
			scrSt = window.scrollY
		else if (document.documentElement.scrollTop)
			scrSt = document.documentElement.scrollTop
		else
			scrSt = document.body.scrollTop

		if (window.scrollX)
			scrSl = window.scrollX
		else if (document.documentElement.scrollLeft)
			scrSl = document.documentElement.scrollLeft
		else
			scrSl = document.body.scrollLeft

		scrDist = dest_positions.top - scrSt
		scrDistX = dest_positions.left - scrSl
		scrDur = 500
		scrTime = 0
		scrInt = 5

		// set interval
		clearInterval(scrollInt)
		scrollInt = setInterval(scrollPage, scrInt)

		return false
	})
}
})

É importante e INDISPENSÁVEL que não esqueça da biblioteca JQuery. Eu costumo usar link da Google para testes, mas você pode copiar e colocar no seu servidor daí você linka na página. URL: http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js

 

Qualquer dúvida sobre entender ou adaptar o código na tua página, é só perguntar.

 

[]s,

Diéssica Gurskas

[marcelo duarte 0]

Diéssica boa tarde, quebrei a cabeça pra tentar incluir esta função em meu site antes de pedir ajuda, mas infelizmente não consegui, me da uma força!

[Diéssica 140]

Diéssica boa tarde, quebrei a cabeça pra tentar incluir esta função em meu site antes de pedir ajuda, mas infelizmente não consegui, me da uma força!

 

Marcelo, antes de mexer com jQuery, é importante ENTENDER jQuery.

 

Mas podemos tentar. Informe o seu problema na adaptação do código e informe a linha de erro, ou a que você não consegue concluir.

 

Os códigos estão todos corretos, acabei de testar.

 

[]s,

Diéssica Gurskas

[marcelo duarte 0]

Ola Diéssica, mais uma vez boa tarde, quebrei a cabeça mais um pouco, e deu tud certo, consegui resolver, muito obrigado por sua ajuda, valeu mesmo pela força!

[Diéssica 140]

Ola Diéssica, mais uma vez boa tarde, quebrei a cabeça mais um pouco, e deu tud certo, consegui resolver, muito obrigado por sua ajuda, valeu mesmo pela força!

 

De nada Marcelo.

 

Na próxima vez poste na área de DHTML, Javascript, jQuery.

 

[]s,

Diéssica Gurskas