Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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!
=)
>
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!
Mas então...
O meu exemplo faz exatamente isso :)
Veja que a caixa cinza da esquerda não sai da vermelha.
bjs
>
Mas então...
O meu exemplo faz exatamente isso :)
Veja que a caixa cinza da esquerda não sai da vermelha.
bjs
Era exatamente isso!
Consegui adaptar no meu código.
Muito Obrigada!
=)
Sem crise ;)
@braços e fique com Deus!
Testei somente no chrome e foi de boa.
<!DOCTYPE html>
@braços e fique com Deus!