JS jQuery右下浮动效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery.js"></script>
<!--/*以为是上下滚动,所以搞改变滚动的top属性(绝对定位),在jquery中有一个scrollTop属性,用于获取页面滚动的高度。所以在每次页面滚动的时候,将浮动层的高度设置为 (初始值)+ scrollTop即可。

 但是scrollTop在ie和其他浏览器中的获取有不一样,可以通过如下方式:
 var bodyTop = 0;
 if (typeof window.pageYOffset != 'undefined') {
 bodyTop = window.pageYOffset;
 } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
 bodyTop = document.documentElement.scrollTop;
 }
 else if (typeof document.body != 'undefined') {
 bodyTop = document.body.scrollTop;
 }
 */
-->

 
<script type="text/javascript">
 jQuery(document).ready(
function($){
     $(window).scroll(
function() {
        
var bodyTop = 0;
        
if (typeof window.pageYOffset != 'undefined') {
            bodyTop 
= window.pageYOffset
        } 
else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
            bodyTop 
= document.documentElement.scrollTop
        } 
else if (typeof document.body != 'undefined') {
            bodyTop 
= document.body.scrollTop
        }
        
var tmpHeight=((document.documentElement.clientHeight==0)?document.body.clientHeight:document.documentElement.clientHeight);
        $(
"#hellobaby").css("top", tmpHeight-50 + bodyTop);
    });
    $(
"#hellobaby").css("top", ((document.documentElement.clientHeight==0)?document.body.clientHeight:document.documentElement.clientHeight)-50);
 });

 
</script>
 
<style type="text/css">
 #hellobaby 
{
 background
:#000;
 color
:#fff;
 border
:1px solid #B3B3B3;
 font-size
:14px;
 right
:0;
 position
:absolute;
 top
:250px;
 opacity
:.7;
 filter
:alpha(opacity=70);
 padding
:10px;
 
}
 #hellobaby a 
{
 color
:orange;
 text-decoration
:none;
 
}
 .closebox 
{
 position
:absolute;
 right
:5px;
 top
:0;
 
}
 
</style>
 
</head>
 
<body>
 
<div style="height:1600px;">
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位点位
<br/>
</div>
<div id="hellobaby">  
<href="#">TOP</a>
<div class="closebox"> <href="javascript:void(0)"onclick="$('#hellobaby').slideUp('slow');$('.closebox').css('display','none');" title="关闭">×</a> </div>
</div>
</body>
</html>
原文地址:https://www.cnblogs.com/skyblue/p/2109566.html