JS & jQ实践——固定边栏滚动

前言

当左边栏内容高度大于右边栏的时候，左边栏继续滚动，右边栏保持底部不变。

使用到的属性有position:fixed、页面高度、滚动高度、内容高度。

判断，当 滚动高度 + 页面高度 > 右边拦高度，右边栏fixed，bottom: 0 , right : 0。

jQuery代码实现

var jWindow = $(window);jWindow.scroll(function(){    var scrollHeight = jWindow.scrollTop();    var screenHeight = jWindow.height();    var sideHeight = $('#rightBox').height();    //判断            if(scrollHeight+screenHeight > sideHeight){        $('#rightBox').css({            'position':'fixed',            'bottom':0,            'right':0,        })    }else{        $('#rightBox').css({'position':'static'});    }       });window.onload = function(){    jWindow.trigger('scroll');};jWindow.resize(function(){    jWindow.trigger('scroll');});

JS代码实现

思路还是一样的，主要是获取方式不太一样。

<script>function magic(){    var rbox = document.getElementById('flBox');    var sideHeight = rbox.offsetHeight;    var screenHeight = document.documentElement.clientHeight || document.body.clientHeight;    var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;//判断    if(scrollHeight+screenHeight > sideHeight){        rbox.style.cssText = 'position:fixed; right:0px; bottom:0px;';              }else{        rbox.style.position = 'static';    }};window.onscroll= magic;window.onresize= magic;</script>