Jquery实现文章页侧边栏随动滑动

Tony He

发布于 2022-11-17 06:14:39

2.1K00

代码可运行

文章被收录于专栏：ouorz.comouorz.com

运行总次数：0

代码可运行

做网站时很可能会用到文章页 sidebar 整个或某一个区块随着整个页面的滑动而固定在某个位置，以方便访客快捷操作。那，这里就简单介绍一下使用 jquery 实现侧边栏随动。

var navH = $("#category-ct").offset().top;
    $(window).scroll(function(){ //滚动条事件
        var scroH = $(this).scrollTop(); //获取要随动的元素的滑动距离
        //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定
        if(scroH>=navH){
        $("#category-ct").css({position: 'fixed'});
        $("#category-ct").animate({top: '30px'},100);
    }
    else{
        $("#category-ct").css({position: 'static',top:'0px'});
    }
    });