条件判断后吸住底部的总结

首先判断是否到达需要让他开始吸住,即“整个页面”的显示高度,要超过他本身的top值。

这个“整个页面”的显示高度是=窗口的高度+滚动条的上部高度:

$(window).height()+$(window).scrollTop()

元素自身的top值是:$("element").offset().top;

然后如果不采用fixed定位,需要让他的absolute定位始终在底部,该位置应该是“整个页面”的显示高度-他自己的高度。

所以完整代码是

//Resize    
    resize();    
    $(window).bind('resize',function(){
        resize();
    });
    $(window).bind('scroll',function(){
        resize();
    });

function resize(){
    var height=//元素高度;
    var _top=$("element").offset().top;
    if($(window).height()+$(window).scrollTop()>_top){
        $("element").css({top:$(window).height()+$(window).scrollTop()-height+"px"});        
    }
    else{
             //如果上面是用position:fixed,bottom:0的话呢,这里就还原成position:relative或者static   
    }    
}   

上面这种是一直兼容到IE6,缺点是吸住很不流畅,会闪烁。稍微考究一点的判断:

function fixedBar(){
    var _bar=$("element").height();
    var height=元素高度;
    if($(window).height()+$(this).scrollTop()<=document.body.clientHeight-height){
        if(_isFirst){    
            document.getElementById("element").style.position="fixed";        
        }
    }else{
        _isFirst=true;
        
        if($(this).scrollTop()>=document.body.clientHeight-bottomHeight-$(window).height()+_bar){
            document.getElementById("element").style.position="relative";
        }
    }
}

区别就在于红色的那句,不再使用offset.top值,而采用body高度减去元素自身高度来获取元素top值。

这里的_isFirst

为全局变量var _isFirst=false;

用来区分两种状态。

原文地址:https://www.cnblogs.com/haimingpro/p/3679017.html