zoukankan      html  css  js  c++  java
  • 条件判断后吸住底部的总结

    首先判断是否到达需要让他开始吸住,即“整个页面”的显示高度,要超过他本身的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;

    用来区分两种状态。

  • 相关阅读:
    OpenCascade Ray Tracing Rendering
    Create New Commands in Tcl
    OpenCascade Modeling Algorithms Fillets and Chamfers
    OpenCascade Modeling Algorithms Boolean Operations
    Construction of Primitives in Open Cascade
    Open Cascade Data Exchange STL
    Tcl Tk Introduction
    Open Cascade DataExchange IGES
    Netgen mesh library : nglib
    Hello Netgen
  • 原文地址:https://www.cnblogs.com/haimingpro/p/3679017.html
Copyright © 2011-2022 走看看