JQuery滚到某一高度时固定侧边栏

前端 1 772

小小草 2021年7月7日 07:45 发表

摘要：在一些分栏的网站布局中，即左侧或右侧为网页主体，另一侧为侧边栏或工具栏的布局，经常会出现网页主体是一个长页面，类似于很多的博客系统，这是就产生了一个需求，就是当侧边栏滚动到某一位置时，固定到页面顶部，这个需求的实现可以使用JQuery来实现，具体实现思路如下：

在一些分栏的网站布局中，即左侧或右侧为网页主体，另一侧为侧边栏或工具栏的布局，经常会出现网页主体是一个长页面，类似于很多的博客系统，这是就产生了一个需求，就是当侧边栏滚动到某一位置时，固定到页面顶部，这个需求的实现可以使用JQuery来实现，具体实现思路如下：

$(document).ready(function(){
        $(document).scroll(function(){
            var topHight = $(document).scrollTop();//页面滚动的高度
            height = parseInt($("#menu").css("height"));//表示页面滚动到此高度是固定某侧边栏元素，一般是需要固定的侧边栏元素上方的总高度
            if(topHight < height) {
            	//页面滚动的高度未达到需要固定的高度
            	//lxbz是需要固定的元素
                $("#lxbz").css({"position":'',"top":'',"z-index":''});
            } else {
            	//页面滚动的高度超过需要固定的高度，将position设置为fixed
                $("#lxbz").css({"position":"fixed","top":"10px","z-index":"20"});
            }
        });
    });

点赞 0 收藏(0)