Ir para conteúdo

POWERED BY:

Arquivado

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

NandaCarol

[Resolvido] Menu Flutuante Ficar limitado a uma <DIV>

Por , em Javascript

Recommended Posts

NandaCarol    0

NandaCarol
Postado

Olá pessoal,

sou novata na área de programação e preciso de uma ajuda.

Preciso criar um menu lateral que flutue de acordo com a rolagem mas somente dentro da <DIV> em que ele esta dentro.

Atualmente ele esta flutuando enquando há rolagem, ou seja, sobrepoe até o rodape.

 

Javascript:

<script language="javascript">

$(function() {

var offset = $("#menu-flutuante").offset();

var topPadding = 15;

$(window).scroll(function() {

if ($(window).scrollTop() > offset.top) {

$("#menu-flutuante").stop().animate({

marginTop: $(window).scrollTop() - offset.top + topPadding

});

} else {

$("#menu-flutuante").stop().animate({

marginTop: 0

});

};

});

});

</script>

 

 

 

HTML:

<div id="sidebar">

<div id="menu-flutuante">

<ul>

<li>Garantias Patrimoniais</li>

<li><a href="" title="Aeronáutico">Aeronáutico <span>»</span></a></li>

</ul>

</div>

</div>

 

 

 

CSS:

#menu-flutuante{

left:0px;

margin:0;

padding:0;

position:absolute;

top:150px;

}

#sidebar{

float:left;

height:1000px;

position:relative;

width:220px;

}

 

 

 

Alguém saberia como resolver?

Obrigada!

=)

Compartilhar este post

Link para o post
Compartilhar em outros sites

hufersil    145

hufersil
Postado

Testei somente no chrome e foi de boa.

 

 

 

<!DOCTYPE html>
<html>
<head>
	<title>Teste</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
	<script>
	$(function(){
		var boundaries = {top: 0, bottom: 0}
			, menuContainer = $('.menu')
			, menu = $('.scrollable')
			, wnd = $(window);

		wnd.on('scroll', function(event){
			var offset = menuContainer.offset();
			boundaries.top = offset.top;
			boundaries.bottom = offset.top + menuContainer.height() - menu.height();

			var st = boundaries.top;
			st = wnd.scrollTop() > st ? wnd.scrollTop() : st;
			st = st > boundaries.bottom ? st = boundaries.bottom : st;

			menu.css({top: st});
		}).triggerHandler('scroll');
	});
	</script>
	<style type="text/css">
	.container {
		width: 100%;
		background-color: #0C0;
	}

	.container .menu {
		height: 1000px;
		float: left;
		width: 150px;
		background-color: #F00;
	}

	.container .content {
		height: 1500px;
		float: right;
		width: 70%;
		background-color: #FC0;
	}

	.container .menu .scrollable {
		width: 150px;
		height: 150px;
		background-color: #CCC;
		position: absolute;
	}
	</style>



</head>
<body>
	<div class="container">
		<div class="menu">
			<div class="scrollable">scrollable menu</div>
		</div>

		<div class="content">Content</div>
	</div>
</body>

</html>

 

 

 

@braços e fique com Deus!

Compartilhar este post

Link para o post
Compartilhar em outros sites

NandaCarol    0

NandaCarol
Postado

Testei somente no chrome e foi de boa.

 

 

 

<!DOCTYPE html>
<html>
<head>
	<title>Teste</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
	<script>
	$(function(){
		var boundaries = {top: 0, bottom: 0}
			, menuContainer = $('.menu')
			, menu = $('.scrollable')
			, wnd = $(window);

		wnd.on('scroll', function(event){
			var offset = menuContainer.offset();
			boundaries.top = offset.top;
			boundaries.bottom = offset.top + menuContainer.height() - menu.height();

			var st = boundaries.top;
			st = wnd.scrollTop() > st ? wnd.scrollTop() : st;
			st = st > boundaries.bottom ? st = boundaries.bottom : st;

			menu.css({top: st});
		}).triggerHandler('scroll');
	});
	</script>
	<style type="text/css">
	.container {
		width: 100%;
		background-color: #0C0;
	}

	.container .menu {
		height: 1000px;
		float: left;
		width: 150px;
		background-color: #F00;
	}

	.container .content {
		height: 1500px;
		float: right;
		width: 70%;
		background-color: #FC0;
	}

	.container .menu .scrollable {
		width: 150px;
		height: 150px;
		background-color: #CCC;
		position: absolute;
	}
	</style>



</head>
<body>
	<div class="container">
		<div class="menu">
			<div class="scrollable">scrollable menu</div>
		</div>

		<div class="content">Content</div>
	</div>
</body>

</html>

 

 

 

@braços e fique com Deus!

 

Obrigada pela ajuda! Mas acho que não descrevi direito o problema.

 

A página é a seguinte: http://www.fernandacarolina.com.br/Teste/MenuFlutuante.html

 

O que eu preciso é que o menu da lateral não flute para fora do box cinza.

 

Abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

hufersil    145

hufersil
Postado

Mas então...

O meu exemplo faz exatamente isso :)

 

Exemplo online

 

Veja que a caixa cinza da esquerda não sai da vermelha.

 

bjs

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