Reputation: 65
I use this code and its working :
$(function(){
$(window).scroll(function() {
if ($(this).scrollTop() > 370) {
$(".userbar").css({
'position':'fixed',
'top':'-41px',
'right':'157px',
'z-index':'2000',
'message':''
});
$(".userbar").slideDown();
}
else {
$(".userbar").css({
'position':'relative',
'margin-top':'40px',
'margin-left':'39px',
'top':'0',
'right':'0'
});
}
});
When i reach to 370 pixel from top its should move the exsiting div from position relative to fixed .
its working good but this is not what i want I want the same div will slide down when i scroll over other div , how to do this ?
Upvotes: 1
Views: 1594
Reputation: 1451
use display: none;
instead of using the position:relative
parameter. Then slide the div depending on the scroll distance.
.userbar
{
width: 50px;
height: 50px;
background: red;
display: none;
position: fixed;
}
$(window).scroll(function() {
if ($(this).scrollTop() < 370)
{
$(".userbar").slideUp();
}
else
{
$(".userbar").slideDown();
}
});
Upvotes: 2