Trying to get jQuery Floating div like mashable
working from this sample http://www.mkyong.com/wp-content/uploads/jQuery/jQuery-Mashable-floating-effect-example.html
Only difference is that I want my box to the right. The only change I have done is added the name of my main Container that wraps everything from the page. I have the floating box sitting before this "main-container" in its own div.
<html>
<head></head>
<body>
<script type="text/javascript">
$(document).ready(function($) {
//this is the floating content
var $floatingbox = $('#floating-box');
if($('#main-container').length > 0){
var bodyY = parseInt($('#main-container').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%',
top: 20,
marginLeft: 500
});
} else if ( scrollY < bodyY && isfixed ) {
$floatingbox.css({
position: 'relative',
left: 0,
top: 0,
marginLeft: originalX
});
}
}
});
}
});
</script>
<div id="floating-box">
<div id="rightMenu">
<ul id="rMenu">
<li><a href="#">Schedule</a&开发者_运维问答gt;</li>
<li><a href="#">Seminars / Events</a></li>
<li><a href="#">Rates / Promotions</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="main-container">
All the page info and divs are in here...
</div>
</body>
</html>
Just change all of those lefts to rights. I think that this should do the trick?
<html>
<head></head>
<body>
<script type="text/javascript">
$(document).ready(function($) {
//this is the floating content
var $floatingbox = $('#floating-box');
if($('#main-container').length > 0){
var bodyY = parseInt($('#main-container').offset().top) - 20;
var originalX = $floatingbox.css('margin-right');
$(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',
right: '50%',
top: 20,
marginRight: 500
});
} else if ( scrollY < bodyY && isfixed ) {
$floatingbox.css({
position: 'relative',
right: 0,
top: 0,
marginRight: originalX
});
}
}
});
}
});
</script>
<div id="floating-box">
<div id="rightMenu">
<ul id="rMenu">
<li><a href="#">Schedule</a></li>
<li><a href="#">Seminars / Events</a></li>
<li><a href="#">Rates / Promotions</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="main-container">
All the page info and divs are in here...
</div>
</body>
</html>
加载中,请稍侯......
精彩评论