css 水平滚动条-jQuery中获取网页滚动条位置的案例

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

在制作网页时，我们有时需要使用一些基于下拉或拉到顶部的交互行为。 网页的这种交互行为可以让我们的后端网页变得更加人性化css 水平滚动条css 水平滚动条，同时也使网页的操作变得越来越方便。 明天这篇博文将记录JQ中滚动条的使用方法和便利性。

jQuery CSS操作——scrollTop()方法

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。

句型

$(selector).scrollTop(offset)

注意：offset 是可选的，指定相对于滚动条底部的偏移量（以像素为单位）。

拿一个橙子，一个大的

使用scrollTop()方法制作一个简单的导航栏如下示例

HTML 代码：

我是导航条

CSS代码

.mochu{
    height:4000px;
    width:100%;
    background-color:#ea6000;
}
.head{
    height: 20px;
    line-height: 20px;
    background-color: aqua;
    color: #000;
    width:100%;
}
.action{
    position:fixed;
    top:0;
    left:0;
    background-color: rgb(0, 255, 0);
}

JQ码

$(window).scroll(function(){//滚动事件获取//判断滚动条高度
    var $scroll = $(document).scrollTop();
    if($scroll>30){//判断滚动条高度
        $(".head").addClass("action");
        //增加CLASS
    }else{
        $(".head").removeClass("action");
        //移除CLASS
    }
})

结果是下面两张图

jQuery CSS操作——scrollLeft()方法

scrollLeft()方法返回或设置匹配元素的滚动条的水平位置

句型

$(selector).scrollLeft(position)

注意：position是可选的，滚动条的水平位置是指从两侧滚动的像素数。 当滚动条在最右边时，位置为0

小家伙，拿个菱角吧

借助 jQuery 的scrollLeft() 方法确定水平滚动条的位置

HTML 代码：

点我测试

CSS代码

.mochu{
    width:3400px;
    height: 20px;
    background-color:#ea6000;
}
#kuaidu{
    position:fixed;
    top:30px;
    left:0px;
}

JQ码

$("#kuaidu").click(function(){
    var $width = $(document).scrollLeft();
    alert("距离为:"+$width+"px");
})

结果我自己测试了一下，就不发图片了，偷懒！ ！ ！ ！ ！ ！