溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jQuery怎么實(shí)現(xiàn)浮動(dòng)層跟隨頁(yè)面滾動(dòng)效果

發(fā)布時(shí)間：2021-08-10 11:00:09 來(lái)源：億速云 閱讀：384 作者：chen 欄目：開(kāi)發(fā)技術(shù)

本篇內(nèi)容介紹了“jQuery怎么實(shí)現(xiàn)浮動(dòng)層跟隨頁(yè)面滾動(dòng)效果”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

文章目錄  

  • CSS

在本文中，我將介紹一個(gè)可以跟隨頁(yè)面滾動(dòng)的層效果，當(dāng)用戶滾動(dòng)鼠標(biāo)滾輪或者拖動(dòng)瀏覽器滾動(dòng)條時(shí)，浮動(dòng)層將跟隨滾動(dòng)。我通過(guò)實(shí)例講解相關(guān)插件的應(yīng)用以及使用時(shí)注意事項(xiàng)。

該效果大多應(yīng)用在企業(yè)網(wǎng)站的在線客服服務(wù)、電子商務(wù)網(wǎng)站的購(gòu)物車(chē)以及商業(yè)網(wǎng)站的廣告條展示等場(chǎng)合。

在本例中，我用到了一個(gè)重要的插件：scroll-follow，該插件在當(dāng)前主流瀏覽器IE6+， FF2+， Safari 3，and Opera 9均測(cè)試通過(guò)，具有可配置參數(shù)，使用簡(jiǎn)單的特點(diǎn)。

HTML

<p id="scroll" class="demo">    ...任意你想展示的內(nèi)容 </p>

只需要一個(gè)p層，內(nèi)容任意。值得注意的是，如果你想把DIV展示在頁(yè)面左右兩邊，則應(yīng)該把這個(gè)DIV放在緊跟<body>后。

CSS

.demo{width:180px; height:250px; margin:10px; border:2px solid #ccc; background:#eee; padding:10px; position:relative; margin-top:-290px;}

設(shè)置DIV的寬度和高度，并設(shè)置絕對(duì)位置position:relative以及距離頂部的值margin-top:-290px，這個(gè)290是怎么算出來(lái)的呢？一看就明白：290=250+10x2+10x2即DIV高度+兩個(gè)margin值+兩個(gè)padding值。

jQuery

首先引入jquery庫(kù)和scroll-follow.js

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.scroll-follow.js"></script>

調(diào)用插件非常簡(jiǎn)單，代碼如下：

$(function(){ $("#scroll").scrollFollow(); });

你可以通過(guò)設(shè)置以下參數(shù)獲得更多的效果：

參數(shù)            描述            默認(rèn)值        speed            滾動(dòng)的間隔毫秒數(shù)，數(shù)值越小，滾動(dòng)越快。            500        offset            距離滾動(dòng)頂部的點(diǎn)數(shù)（pixels）。            0        relativeTo            設(shè)置滾動(dòng)的DIV靠上還是靠下，可以設(shè)置為"top"或"bottom"。            top        killSwitch            開(kāi)啟和取消跟隨滾動(dòng)開(kāi)關(guān)的元素ID，需要jQuery Cookie plugin支持。            "killSwitch"        onText            如果啟用了跟隨滾動(dòng)，開(kāi)關(guān)顯示的文字。            "Turn Slide Off"        offText            如果取消了跟隨滾動(dòng)，開(kāi)關(guān)顯示的文字。            "Turn Slide On"

官方網(wǎng)站還提供了delay和container兩個(gè)參數(shù)，用來(lái)控制滾動(dòng)延時(shí)和滾動(dòng)范圍，我覺(jué)得沒(méi)有多大實(shí)用意義，就不作描述了。

需要提醒的是，如果我想讓浮動(dòng)的DIV層展示在頁(yè)面的右側(cè)，該怎么辦？其實(shí)該插件不具備此功能，我們需要做的就是通過(guò)CSS來(lái)定位浮動(dòng)DIV的位置。

.demo{width:180px; height:250px; margin:10px; border:2px solid #ccc; background:#eee; padding:10px; position:absolute; margin-top:156px; right:10px;}

通過(guò)相對(duì)定位來(lái)確定浮動(dòng)DIV層的位置，相當(dāng)靈活，具體效果可以查看DEMO演示。

“jQuery怎么實(shí)現(xiàn)浮動(dòng)層跟隨頁(yè)面滾動(dòng)效果”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手