Floating div using JQuery
I want a floating div to the right side of the content, I have one script in my hand but shows the div in left side, how to chnage the div position to right by editing the following script.
here is the script..
//avoid conflict with other script
$j=jQuery.noConflict();
$j(document).ready(function($) {
//this is the floating content
var $floatingbox = $('#floating-box');
if($('#body').length > 0){
var bodyY = parseInt($('#body').offset().top) - 20;
var originalX = $floatingbox.css('margin-left');
$(window).scroll(function () {
var scrollY = $(window).scrollTop();
var isfixed = $floatingbox.css('position') == 'fixed';
if($floatingbox.length > 0){
//$floatingbox.html("srollY : " + scrollY + ", bodyY : "
//+ bodyY + ", isfixed : " + isfixed);
if ( scrollY > bodyY && !isfixed ) {
$floatingbox.stop().css({
position: 'fixed',
left: '50%',
开发者_Go百科 top: 20,
marginLeft: -500
});
} else if ( scrollY < bodyY && isfixed ) {
$floatingbox.css({
position: 'relative',
left: 0,
top: 0,
marginLeft: originalX
});
}
}
});
}
});
I'm looking forward to the replies..
Thanks Paul
Is there a reason why you need a script to do this? It seems to me that it would be easily done with straight CSS declarations:
.floatingdiv {
position:fixed;
left:0;
top:20px; // or whatever
}
Now, I know that fixed positioning isn't supported in IE6, but you can at least use a hack to have IE6 fall back to position:absolute. There are several suggestions around, but I like this one. Add the following (including the asterisk) to your stylesheet after your initial style declaration for the element:
* html .floatingdiv {
position: absolute;
}
You don't get the fixed effect in IE6, but the trade-off is that you get a performance boost because you don't need the extra javascript to load. In anything since IE7 you also get a smoother performance for that fixed div.
精彩评论