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;

    用来区分两种状态。

  • 相关阅读:
    luoguP1919 A*B Problem升级版 ntt
    luogu[愚人节题目3]现代妖怪殖民地 NTT
    FFT 快速傅里叶变换 学习笔记
    十二省联考 爆0记
    # NOI.AC省选赛 第五场T1 子集,与&最大值
    2019.6.16完成classstack任务
    USACO-集合
    USACO-修理牛棚
    dij模板
    洛谷P1948 [USACO08JAN]电话线Telephone Lines
  • 原文地址:https://www.cnblogs.com/haimingpro/p/3679017.html
Copyright © 2011-2022 走看看