js實(shí)現(xiàn)淘寶固定側(cè)邊欄

更新時(shí)間：2022年07月03日 13:58:05 作者：阿旋要畢業(yè)~

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)淘寶固定側(cè)邊欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)淘寶固定側(cè)邊欄的具體代碼，供大家參考，具體內(nèi)容如下

1.實(shí)現(xiàn)效果：

當(dāng)頁(yè)面運(yùn)行到banner區(qū)域時(shí)，右邊側(cè)邊欄改為固定定位，當(dāng)頁(yè)面運(yùn)行到主體區(qū)域時(shí)，右邊側(cè)邊欄顯示返回到頂部。

2.思路：

（1）給document加scroll事件。

（2）獲取頁(yè)面被卷去的部分用window.pageYOffset.

（3）不斷判斷頁(yè)面滾動(dòng)了多少。計(jì)算右邊側(cè)邊欄應(yīng)該待的位置。

3.代碼：

pink老師用了固定定位fixed（固定定位是相對(duì)于窗口的距離），我做的還是用絕對(duì)定位（絕對(duì)定位是相對(duì)于父元素來(lái)說(shuō)的，即document），都是可以實(shí)現(xiàn)的。

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? .top {
? ? ? ? ? ? width: 80%;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? background-color: pink;
? ? ? ? }
? ? ? ? .banner {
? ? ? ? ? ? width: 80%;
? ? ? ? ? ? height: 400px;
? ? ? ? ? ? background-color: aquamarine;
? ? ? ? }
? ? ? ? .main {
? ? ? ? ? ? width: 80%;
? ? ? ? ? ? height: 800px;
? ? ? ? ? ? background-color: red;
? ? ? ? }
? ? ? ? .foot {
? ? ? ? ? ? width: 80%;
? ? ? ? ? ? height: 400px;
? ? ? ? ? ? background-color:blanchedalmond;
? ? ? ? }
? ? ? ? .lan {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? right:10%;
? ? ? ? ? ? top:400px;
? ? ? ? ? ? width: 80px;
? ? ? ? ? ? height: 80px;
? ? ? ? ? ? background-color: cadetblue;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="top">頭部區(qū)域</div>
? ? <div class="banner">banner區(qū)域</div>
? ? <div class="main">頭部區(qū)域</div>
? ? <div class="foot">尾部區(qū)域</div>
? ? <div class="lan"></div>
? ? <script>
? ? ? ? var lan = document.querySelector('.lan');
? ? ? ? document.addEventListener('scroll', function() {
? ? ? ? ? ? console.log('jkjkkj');
? ? ? ? ? ? var top = window.pageYOffset;
? ? ? ? ? ? if(top ?> 200) {
? ? ? ? ? ? ? ? // 改為固定定位。
? ? ? ? ? ? ? ? var topp = 400-200 + top;
? ? ? ? ? ? ? ? lan.style.top = topp+'px';
? ? ? ? ? ? ? ? if(top > 600) {
? ? ? ? ? ? ? ? ? ? lan.innerHTML = '返回頂部';
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? lan.innerHTML = '';
? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? lan.style.top = 400+'px';
? ? ? ? ? ? ? ? lan.innerHTML = '';
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

window.print()打印html網(wǎng)頁(yè)的兩種方法實(shí)現(xiàn)
本文主要介紹了window.print()打印html網(wǎng)頁(yè)的兩種方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
js實(shí)現(xiàn)簡(jiǎn)單的拖拽效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單的拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
如何獲取TypeScript的聲明文件.d.ts
這篇文章主要介紹了如何獲取TypeScript的聲明文件.d.ts 的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下
2018-05-05
js 解析 JSON 數(shù)據(jù)簡(jiǎn)單示例
這篇文章主要介紹了js 解析 JSON 數(shù)據(jù)的方法,結(jié)合簡(jiǎn)單實(shí)例形式分析了js 解析 JSON 格式數(shù)據(jù)的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下
2020-04-04
淺談JavaScript正則表達(dá)式分組匹配
一個(gè)正則表達(dá)式要如何書寫才能同時(shí)匹配這兩個(gè)數(shù)字呢？簡(jiǎn)單的字符表達(dá)式當(dāng)然無(wú)法完成了，這個(gè)時(shí)候我們就可以定義一個(gè)字符集合（字符類）來(lái)進(jìn)行匹配。這就是分組匹配了
2015-04-04
JavaScript Proxy基本用法詳解
這篇文章主要介紹了JavaScript Proxy基本用法，Proxy對(duì)象用于創(chuàng)建一個(gè)對(duì)象的代理，從而實(shí)現(xiàn)基本操作的攔截和自定義，如屬性查找、賦值、枚舉、函數(shù)調(diào)用等
2022-12-12
前端強(qiáng)大的圖片預(yù)覽組件Viewer.js使用方法
這篇文章主要給大家介紹了關(guān)于前端強(qiáng)大的圖片預(yù)覽組件Viewer.js使用方法的相關(guān)資料,Viewer.js是一款強(qiáng)大的圖片查看器,雖然簡(jiǎn)單且易上手,但是卻并不影響其在圖片查看方面的強(qiáng)大功能,同時(shí)這款優(yōu)秀的插件配置操作起來(lái)也非常的方便,需要的朋友可以參考下
2024-01-01
layui--select使用以及下拉框?qū)崿F(xiàn)鍵盤選擇的例子
今天小編就為大家分享一篇layui--select使用以及下拉框?qū)崿F(xiàn)鍵盤選擇的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
2019-09-09
JavaScript常見錯(cuò)誤：“無(wú)法讀取未定義的屬性”的原因及解決方案
本文將深入探討“無(wú)法讀取未定義的屬性”這一常見JavaScript錯(cuò)誤,分析其成因,提供詳細(xì)的解決方案和最佳實(shí)踐,幫助開發(fā)者有效地預(yù)防和修復(fù)此類問題,感興趣的小伙伴跟著小編一起來(lái)看看吧
2024-12-12
解析element-ui中upload組件傳遞文件及其他參數(shù)的問題
這篇文章主要介紹了element-ui中upload組件如何傳遞文件及其他參數(shù),分析一下我使用element-ui遇到的問題以及解決方法，需要的朋友可以參考下
2021-11-11