Ir para conteúdo

POWERED BY:

Arquivado

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

Ricardo Gama

Div rolando com a página

Por , em Desenvolvimento frontend

Recommended Posts

Ricardo Gama    0

Ricardo Gama
Postado

Galera, já vi em muitos sites o seguinte: Uma div quieta lá no meio da página. Provável que tenha um position: absolute. Aí você rola a página, quando chega no topo e a div iria sumir, ela ganha um position: fixed e acompanha a página. Isso acontece muito com carrinho de compra. Alguém pode me dar uma luz de como fazer isso? Ou como procurar isso no google? Quando coloco "Div rolanco com a página" sempre vem resultados falando como colocar barra de rolagem em div, e não é isso que quero!!!

 

Desde já agradeço.

 

Abçs, Rico

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Adapte para as suas necessidades:

<!DOCTYPE HTML>
<html>
<head>
<title>Teste Fixed Scroll</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

#main {
width: 600px;
margin: 0 auto;
padding: 80px 10px;
height: 1000px;
background-color: #FF0;
position: relative;
}

#scroll {
width: 600px;
margin: 0 auto;
height: 200px;
background-color: #F00;
position: absolute;
}

#scroll.fixed {
position: fixed;
top: 10px;
color: #00F;
}
</style>
<script type="text/javascript" >
window.onload = function(){
window.onscroll = function(){
	var windowScrollY = window.pageYOffset;

	var scroll = document.getElementById('scroll');
	var scrollPos = (function(obj){
		var curleft = curtop = 0;
		if (obj.offsetParent) {
			do {
				curleft += obj.offsetLeft;
				curtop += obj.offsetTop;
			} while (obj = obj.offsetParent);
		}
		return {'left':curleft,'top':curtop};
	})(scroll);

	var offsetY = scrollPos.top;

	if(windowScrollY >= offsetY) {
		scroll.className = 'fixed';
	} else {
		scroll.className = '';
	}
}
}
</script>
</head>
<body>
<div id="main">
	<div id="scroll">
	</div>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ricardo Gama    0

Ricardo Gama
Postado

Adapte para as suas necessidades:

<!DOCTYPE HTML>
<html>
<head>
<title>Teste Fixed Scroll</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

#main {
width: 600px;
margin: 0 auto;
padding: 80px 10px;
height: 1000px;
background-color: #FF0;
position: relative;
}

#scroll {
width: 600px;
margin: 0 auto;
height: 200px;
background-color: #F00;
position: absolute;
}

#scroll.fixed {
position: fixed;
top: 10px;
color: #00F;
}
</style>
<script type="text/javascript" >
window.onload = function(){
window.onscroll = function(){
	var windowScrollY = window.pageYOffset;

	var scroll = document.getElementById('scroll');
	var scrollPos = (function(obj){
		var curleft = curtop = 0;
		if (obj.offsetParent) {
			do {
				curleft += obj.offsetLeft;
				curtop += obj.offsetTop;
			} while (obj = obj.offsetParent);
		}
		return {'left':curleft,'top':curtop};
	})(scroll);

	var offsetY = scrollPos.top;

	if(windowScrollY >= offsetY) {
		scroll.className = 'fixed';
	} else {
		scroll.className = '';
	}
}
}
</script>
</head>
<body>
<div id="main">
	<div id="scroll">
	</div>
</div>
</body>
</html>

 

Então, ta dando um erro:

TypeError: obj is null

 

Sabe informar o que é???

 

Abçs

Compartilhar este post

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

Informação importante

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

  Aceito