在制作網頁中,我們有時會需要用到一些根據而面下拉或拉到底部而做出的一些交互行為,這些網頁的交互行為可以使我們的前端網頁使用起來更加的人性化,也是網頁的操作更加的便利,今天這篇博文記錄一下JQ中使用滾動條的方法與案便

jQuery CSS 操作 - scrollTop() 方法

scrollTop() 方法返回或設置匹配元素的滾動條的垂直位置。

語法

$(selector).scrollTop(offset)

注:offset可選,規定相對滾動條頂部的偏移,以像素計。

舉個梨子,大個的

利用scrollTop()方法做個簡單的導航條跟隨例子

HTML代碼:

利用scrollTop()方法做個簡單的導航條跟隨例子

<!--導航條-->
<div class="head">我是導航條</div>
<!--這里是為了增加頁面的高度-->
<div class="mochu">
</div>

CSS代碼

利用scrollTop()方法做個簡單的導航條跟隨例子

.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
    }
})

結果如下面的兩條圖

利用scrollTop()方法做個簡單的導航條跟隨例子    利用scrollTop()方法做個簡單的導航條跟隨例子

jQuery CSS 操作 - scrollLeft() 方法

scrollLeft() 方法返回或設置匹配元素的滾動條的水平位置

語法

$(selector).scrollLeft(position)

国产视频app 注:position為可選項,滾動條的水平位置指的是從其左側滾動過的像素數。當滾動條位于最左側時,位置是 0

国产视频app 舉個梨子,小個的

利用jQuery的scrollLeft()方法水平滾條的位置

HTMLT代碼:

利用jQuery的scrollLeft()方法水平滾條的位置

<!--這里是為了增加頁面的寬度度-->
<div class="mochu"></div>
<button id="kuaidu">點我測試</button>

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

結果自己測試,不發圖了,懶!!!!!!