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

最新推荐文章于 2022-12-26 18:08:10 发布

TimChen666

最新推荐文章于 2022-12-26 18:08:10 发布

阅读量559

点赞数

分类专栏： javascript jQuery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/lihaoen666/article/details/78083232

版权

javascript 同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

jQuery

9 篇文章 0 订阅

订阅专栏

前言

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

使用到的属性有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>