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

Tony He

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

2K0

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

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

做网站时很可能会用到文章页 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'});
    }
    });

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

jquery