滑动滚动条，某元素依然固定在某个位置

最新推荐文章于 2023-11-22 20:22:08 发布

qq_40927742

最新推荐文章于 2023-11-22 20:22:08 发布

阅读量923

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_40927742/article/details/100276622

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>  
<html> 
<script type="text/javascript" src="views/default/script/jquery.min.js"></script>

<style>
.fixDiv{position:fixed;top:15px;}
</style>

<div style="height:1500px;">div1</div>
<div class="on_top" >this is always on the top</div>
<div style="height:1500px;">div2</div>

<script type="text/javascript">

    $(function(){
        var banOffTop=$(".on_top").offset().top;//获取到距离顶部的垂直距离
        var scTop=0;//初始化垂直滚动的距离
        $(document).scroll(function(){
            scTop=$(this).scrollTop();//获取到滚动条拉动的距离
            //console.log(scTop);查看滚动时，垂直方向上，滚动条滚动的距离
            if(scTop>=banOffTop){
			console.log(banOffTop);
            //核心部分：当滚动条拉动的距离大于等于导航栏距离顶部的距离时，添加指定的样式
                $(".on_top").addClass("fixDiv");
            }else{
                $(".on_top").removeClass("fixDiv");
            }

        })
    })
</script>

</html>

函数非原创，忘了借鉴自某处了…

qq_40927742

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
滑动滚动条，某元素依然固定在某个位置

将下面的map_left名字替换成需要的名字即可<style>.fixDiv{position:fixed;top:15px;}/*相对于浏览器定位*/</style><script type="text/javascript"> $(function(){ var banOffTop=$(".map_left").offse...
复制链接

扫一扫