今天公司项目有一项需求，在页面内容较多时，将底部的申请按钮以浏览器底部悬浮的形式展现，当滑动到页面底部时，按钮则固定到页面中，以下为实现方法，做笔记记录使用。

css样式为：

<style media="screen">
.dfudong {
 position: fixed;
 bottom: -88px;
 width: 50%;
}
</style>

页面元素为：

<div class="" id="mustshenqingtip">&nbsp;</div>
 <div style="text-align: center;margin: 50px 0px 88px 0px;" id="mustshenqing" class="dguding">
 <a href="#" style="text-decoration: none;"><div style="width:50%;margin-left:25%;background-color: #ff0000; height: 60px; line-height: 60px; text-align: center; color: #ffffff; font-size: 1em;">立即申请 </div></a>
 </div>

js代码为：

<script>
var element = document.getElementById("mustshenqing");
var elementtip = document.getElementById("mustshenqingtip");
function getElementTop(element){
　　　　var actualTop = element.offsetTop;
　　　　var current = element.offsetParent;

　　　　while (current !== null){
　　　　　　actualTop += current.offsetTop;
　　　　　　current = current.offsetParent;
　　　　}

　　　　return actualTop;
　　}
$(window).scroll(function(){
 //下面这句主要是获取网页的总高度，主要是考虑兼容性所以把Ie支持的documentElement也写了，这个方法至少支持IE8
 var htmlHeight=document.body.scrollHeight||document.documentElement.scrollHeight;
 //clientHeight是网页在浏览器中的可视高度，
 if (document.documentElement.clientHeight) {
 var clientHeight=document.documentElement.clientHeight;
 }else {
 var clientHeight= document.body.clientHeight;
 }
 //scrollTop是浏览器滚动条的top位置，
 var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
 //通过判断滚动条的top位置与可视网页之和与整个网页的高度是否相等来决定是否加载内容
 var divhieght = getElementTop(elementtip);
 var classn = element.getAttribute('class');
 console.log(classn);
 if ((clientHeight + scrollTop) > divhieght) {
 if (classn != 'dguding') {
 changeclass('dguding')
 }
 }else{
 if (classn != 'dfudong') {
 changeclass('dfudong')
 }
 }
 });
 function changeclass(classnames) {
 document.getElementById('mustshenqing').className = classnames;
 }
</script>