具体的功能要求是这样的:
有一个div块,应该随着鼠标向下拉,向下
参考:
http://www.mkyong.com/jquery/mashable-floating-effect-example-with-jquery/
http://www.mkyong.com/wp-content/uploads/jQuery/jQuery-Mashable-floating-effect-example.html
有一个div块,应该随着鼠标向下拉,向下
<style type="text/css">
#floating-box{
float:right;
margin-left:720px;
margin-right:10px;
position:absolute;
z-index:1;
}
</style>
<script type="text/javascript">
//avoid conflict with other script
$(document).ready(function($) {
$(".circlelist ul li").click(function(){
var href = $(this).children("span").children("a").attr("href");
window.location = href;
});
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.height() + 100 < $(window).height()){
if($floatingbox.length > 0){
if ( scrollY > bodyY && !isfixed ) {
$floatingbox.stop().css({
position: 'fixed',
left: '50%',
top: 20,
marginLeft: 240
});
} else if ( scrollY < bodyY && isfixed ) {
$floatingbox.css({
position: 'fixed',
left: '50%',
top: 118,
marginLeft: 240
});
}
}
}
});
}
});
</script>
参考:
http://www.mkyong.com/jquery/mashable-floating-effect-example-with-jquery/
http://www.mkyong.com/wp-content/uploads/jQuery/jQuery-Mashable-floating-effect-example.html