JS電梯導航的實現(xiàn)示例
預覽效果
之前css 利用 scroll-behavior 和 錨點 實現(xiàn)了 電梯導航,點擊可以看這篇文章css實現(xiàn)電梯導航的效果。評論區(qū)有人想讓我用js也實現(xiàn)一下,一開始我起初有點蒙,不知道css和js實現(xiàn)的效果有什么區(qū)別。后來我發(fā)現(xiàn)了。
css實現(xiàn)的只是單純點擊滑動到指定位置而已。而js實現(xiàn)不僅可以實現(xiàn)點擊滑動,而且可以監(jiān)聽滑動事件,讓滑動標題高亮,也就是有一個active類
比如我們在這里滑倒了第一塊區(qū)域的末尾,但是還沒滑倒第二塊區(qū)域,于是滑動標題還只是Section1高亮,當我們滑動到第二塊區(qū)域時,滑動標題變成了Section2高亮


主要的js代碼
主要思路就是對滑動事件進行監(jiān)聽。監(jiān)聽到當前滑動到的位置,然后判斷當前所在的位置處于哪一塊區(qū)域。給它add active的類,當滑走當前區(qū)域,就會remove active類。
監(jiān)聽點擊事件,其實跟css 里的scroll-behavior差不多。點擊導航,然后獲取點擊的href,然后獲取要顯示的區(qū)域的位置,然后滑動到那個位置,然后導航就會運行上面的監(jiān)聽加高亮類。
// 獲取所有的導航鏈接
const links = document.querySelectorAll('.elevator a');
// 獲取所有的內(nèi)容區(qū)塊
const sections = document.querySelectorAll('.section');
// 監(jiān)聽窗口滾動事件
window.addEventListener('scroll', function () {
// 獲取滾動條的位置
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// 遍歷所有的內(nèi)容區(qū)塊
sections.forEach(function (section) {
// 獲取內(nèi)容區(qū)塊的位置信息
const offsetTop = section.offsetTop;
const offsetHeight = section.offsetHeight;
// 判斷當前內(nèi)容區(qū)塊是否在可視范圍內(nèi)
if (scrollTop >= offsetTop && scrollTop < offsetTop + offsetHeight) {
// 如果在可視范圍內(nèi),則將對應的導航鏈接設置為 active 狀態(tài)
links.forEach(function (link) {
if (link.getAttribute('href') === '#' + section.getAttribute('id')) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
}
});
});
// 監(jiān)聽所有的導航鏈接的點擊事件
links.forEach(function (link) {
link.addEventListener('click', function (event) {
event.preventDefault();
// 獲取目標內(nèi)容區(qū)塊的位置信息
const targetId = link.getAttribute('href');
const targetSection = document.querySelector(targetId);
const targetOffsetTop = targetSection.offsetTop;
// 使用動畫滑動到目標內(nèi)容區(qū)塊
window.scrollTo({
top: targetOffsetTop,
behavior: 'smooth'
});
});
});整體代碼
html
- 導航 一個ul標簽里面五個li 點擊事件
- 頁面顯示 五個塊級區(qū)域
<div class="elevator">
<ul>
<li><a href="#section1" rel="external nofollow" >Section 1</a></li>
<li><a href="#section2" rel="external nofollow" >Section 2</a></li>
<li><a href="#section3" rel="external nofollow" >Section 3</a></li>
<li><a href="#section4" rel="external nofollow" >Section 4</a></li>
<li><a href="#section5" rel="external nofollow" >Section 5</a></li>
</ul>
</div>
<div class="section" id="section1">
<h2>Section 1</h2>
<p>第一塊 </p>
<video
src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/2366564fa6b83158208eb3181752a8d6_preview.mp4"
autoplay muted loop></video>
</div>
<div class="section" id="section2">
<h2>Section 2</h2>
<p>第二塊 </p>
<video src="https://img-baofun.zhhainiao.com/market/133/3760b2031ff41ca0bd80bc7a8a13f7bb_preview.mp4" autoplay
muted loop></video>
</div>
<div class="section" id="section3">
<h2>Section 3</h2>
<p>第三塊 </p>
<video src="https://img-baofun.zhhainiao.com/market/semvideo/3fc6cdef4427e61be69096c6ebb59a1c_preview.mp4"
autoplay muted loop></video>
</div>
<div class="section" id="section4">
<h2>Section 4</h2>
<p>第四塊 </p>
<video src="https://img-baofun.zhhainiao.com/market/semvideo/6ac24b3f50fda0b1a55f7ff25c6b62af_preview.mp4"
autoplay muted loop></video>
</div>
<div class="section" id="section5">
<h2>Section 5</h2>
<p>第五塊 </p>
<video src="https://img-baofun.zhhainiao.com/market/133/97ba6b60662ab4f31ef06cdf5a5f8e94_preview.mp4" autoplay
muted loop></video>
</div>css
.elevator 固定電梯按鈕,也就是導航
.elevator {
position: fixed; /* 固定定位,保證電梯一直在頁面可視區(qū)域內(nèi) */
top: 50%; /* 在頁面垂直居中 */
right: 0; /* 在頁面右側(cè) */
transform: translateY(-50%); /* 通過 translateY 屬性來調(diào)整位置,保證垂直居中 */
}
.elevator ul {
list-style: none; /* 去掉列表樣式 */
margin: 0; /* 去掉外邊距 */
padding: 0; /* 去掉內(nèi)邊距 */
}
.elevator li {
margin: 10px 0; /* 設置每個列表項的上下外邊距 */
}
.elevator a {
display: block; /* 將鏈接轉(zhuǎn)換為塊級元素,方便設置樣式 */
padding: 10px; /* 設置內(nèi)邊距 */
background-color: #ccc; /* 設置背景顏色 */
color: #000; /* 設置文字顏色 */
text-decoration: none; /* 去掉下劃線 */
}
.elevator a.active {
background-color: #000; /* 當前所在樓層鏈接的背景顏色 */
color: #fff; /* 當前所在樓層鏈接的文字顏色 */
}
/* 頁面區(qū)塊樣式 */
.section {
width: 90vw; /* 頁面寬度為視口寬度的90% */
height: 110vh; /* 頁面高度為視口高度的110% */
}
.section video {
width: 100%; /* 視頻寬度自適應父級容器 */
height: 90%; /* 視頻高度為父級容器高度的90% */
}js
就是之前的主要的js代碼
到此這篇關于JS電梯導航的實現(xiàn)示例的文章就介紹到這了,更多相關JS電梯導航內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
微信小程序?qū)崿F(xiàn)收藏與取消收藏切換圖片功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)收藏與取消收藏切換圖片功能,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08
JavaScript中防抖和節(jié)流的原理和區(qū)別詳解
JavaScript 中,防抖和節(jié)流是一種用于優(yōu)化事件處理函數(shù)調(diào)用頻率的技術,防抖和節(jié)流的目的都是為了避免頻繁地觸發(fā)事件處理函數(shù),從而減少瀏覽器和服務器的負擔,本文將給大家介紹一下JavaScript中防抖和節(jié)流的原理和區(qū)別,需要的朋友可以參考下2023-09-09
JavaScript實現(xiàn)帶箭頭標識的多級下拉菜單效果
這篇文章主要介紹了JavaScript實現(xiàn)帶箭頭標識的多級下拉菜單效果,可實現(xiàn)橫向與縱向箭頭的形式標識選中菜單項位置的功能,涉及javascript針對頁面元素位置的判定與樣式動態(tài)操作技巧,需要的朋友可以參考下2015-08-08
關于javascript event flow 的一個bug詳解
描述了firefox,safari 有一個bug和DOM 3 規(guī)范不一致:在event.currentTarget等于event.target的時候(即event flow處于target phase時),會調(diào)用添加到currentTarget上的useCapture為true的listener2013-09-09

