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;

    用来区分两种状态。

  • 相关阅读:
    电脑桌面图标不显示图案变成白色图标该怎么办?
    行动上的巨人养成指南
    荣耀MagicBook Pro 2020款对比2019款做了哪些升级
    P8 function template ,函数模板
    MATLAB中imfill()函数
    MagicBook Pro 2020锐龙版
    P7. class template, 类模板,模板类
    6. namespace经验谈
    macbook pro2020参数
    MATLAB取整
  • 原文地址:https://www.cnblogs.com/haimingpro/p/3679017.html
Copyright © 2011-2022 走看看