Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Rudy_jr

[Resolvido] Rolagem de página

Por , em Javascript

Recommended Posts

Rudy_jr    47

Rudy_jr
Postado

Olá, gostaria de saber como se chama e se existe algum script jquery meio que pronto para o seguinte efeito;

 

O topo (digamos de 30 px de altura) fica fixo,

 

porém quando clica no menu, o site "rola" ex: Tá tudo verde, clicou no outro menu o site rola para baixo para uma parte toda azul no caso o menu 2, e já marcaria automaticamente no menu,

 

não faço idéia de como procurar, já tentei por fullpage roll, roll page, fullpage slide, rolagem de página e afins, não descobri como chamar isso, o cliente deseja um efeito deste e não faço idéia de onde achar algo relacionado

 

Alguém pode me ajudar nisso?

 

Thanks

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Não conheço nenhum plugin pronto com essas 2 coisas não.

 

Porém é simples implementar, e se você atacar um problema de cada vez vai conseguir fazer.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rudy_jr    47

Rudy_jr
Postado

Não sou expert em java script, mas até consigo me virar,

 

sabe aonde consigo exemplos separados das duas coisas? o do fixo até achei alguns aqui já, só preciso de algum exemplo de rolagem para começar a fazer,

 

vlws

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

conheço o plugin scrollTo

 

http://demos.flesler.com/jquery/scrollTo/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rudy_jr    47

Rudy_jr
Postado

Consegui,

 

segue um exemplo completo para se alguém precisar um dia

 

juntei um pouco de um, um pouco de outro

 

coloquei um pouco de jquery para a rolagem, o topo eu apenas copiei de um exemplo que vi em CSS3 e jquery, apenas ctrl+c e ctrl+v ai coloquei as ancoras, e pronto =D

 

INDEX

<head>
<title>Exemplo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="navi">
<div id="menu" class="default">
	<ul>
	<li><a href="javascript:void(0)" onClick="vaparaaancora('1')">Ancora 1</a></li>
	<li><a href="javascript:void(0)" onClick="vaparaaancora('2')">Ancora 2</a></li>
	<li><a href="javascript:void(0)" onClick="vaparaaancora('3')">Ancora 3</a></li>
	<li><a href="javascript:void(0)" onClick="vaparaaancora('4')">Ancora 4</a></li>		
	</ul>
</div><!-- close menu -->
</div><!-- close navi -->
<script>
	function vaparaaancora(id){
    			$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
	}
	</script>
<div id="content">
<ul>
	<li><a href="javascript:void(0)" onClick="vaparaaancora('1')">Ancora 1</a></li>
	<li><a href="javascript:void(0)" onClick="vaparaaancora('2')">Ancora 2</a></li>
	<li><a href="javascript:void(0)" onClick="vaparaaancora('3')">Ancora 3</a></li>
	<li><a href="javascript:void(0)" onClick="vaparaaancora('4')">Ancora 4</a></li>	
</ul>
<div style="width:600px">
	<div id="1">
	<h1>1</h1>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus. 
	</div>
	<div id="2">
	<h1>2</h1>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus. 
	</div>
	<div id="3">
	<h1>3</h1>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus. 
	</div>
       <ul>
	<li><a href="javascript:void(0)" onClick="vaparaaancora('1')">Ancora 1</a></li>
	<li><a href="javascript:void(0)" onClick="vaparaaancora('2')">Ancora 2</a></li>
	<li><a href="javascript:void(0)" onClick="vaparaaancora('3')">Ancora 3</a></li>
	<li><a href="javascript:void(0)" onClick="vaparaaancora('4')">Ancora 4</a></li>	
</ul>
	<div id="4">
	<h1>4</h1>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus. 
	</div>
</div>
</div><!-- content -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="nagging-menu.js" charset="utf-8"></script>
</body>
</html>

 

style.css

body {
background: #efefef;
margin: 0;
padding: 0;
border: none;
text-align: center;
font: normal 13px Verdana, sans-serif;
color: #222;
}

#navi {
height: 50px;
margin-top: 50px;
}

#menu {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #426d9c), color-stop(40%, #0f67a1), color-stop(100%, #1384d1));
background: -moz-linear-gradient(top, #426d9c, #0f67a1, #1384d1);

border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;

line-height: 50px;
text-align: center;
margin: 0 auto;
padding: 0;
}

#content {
width: 750px;
margin: 0 auto;
margin-bottom: 25px;
padding: 30px 0;
text-align: left;
}

ul {
padding: 0;
}

ul li {
list-style-type: none;
display: inline;
margin-right: 15px;
}

ul li a {
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
padding: 3px 7px;

border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;

-webkit-transition-property: color, background;
-webkit-transition-duration: 0.5s, 0.5s;
}

ul li a:hover {
background: #01458e;
color: #ff0;

-webkit-transition-property: color, background;
-webkit-transition-duration: 0.5s, 0.5s;
}

.default {
width: 850px;
height: 50px;

box-shadow: 0 5px 20px #888;
-webkit-box-shadow: 0 5px 20px #888;
-moz-box-shadow: 0 5px 20px #888;
}

.fixed {
position: fixed;
top: -5px;
left: 0;
width: 100%;

box-shadow: 0 0 40px #222;
-webkit-box-shadow: 0 0 40px #222;
-moz-box-shadow: 0 0 40px #222;
}

 

 

nagging-menu.js

$(function(){

var menu = $('#menu'),
	pos = menu.offset();

	$(window).scroll(function(){
		if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
			menu.fadeOut('fast', function(){
				$(this).removeClass('default').addClass('fixed').fadeIn('fast');
			});
		} else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
			menu.fadeOut('fast', function(){
				$(this).removeClass('fixed').addClass('default').fadeIn('fast');
			});
		}
	});

});

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito