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"});
            }
        });
    });

评论↓[写评论]


There is nothing!