使用jquery庫實現(xiàn)電梯導(dǎo)航效果
更新時間：2022年02月22日 16:49:00 作者：smile-linlin001
這篇文章主要為大家詳細(xì)介紹了使用jquery庫實現(xiàn)電梯導(dǎo)航效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
一般來說，一些大型的電商網(wǎng)站首頁，頁面內(nèi)容很多，頁面會很長，這時候大部分網(wǎng)站都選擇使用電梯導(dǎo)航，使頁面跳轉(zhuǎn)到相應(yīng)位置或者返回頂部。
下面使用jquery庫來實現(xiàn)電梯導(dǎo)航
基本思路
電梯導(dǎo)航基本上就是使用元素距離頁面頭部的高度offsetTop和頁面滾動的距離scrollTop來進(jìn)行比較事項相應(yīng)的效果。
1、頁面滾動到相應(yīng)的位置，實現(xiàn)電梯導(dǎo)航的顯示與隱藏
2、頁面滾動到相應(yīng)的位置，電梯導(dǎo)航的按鈕添加或者移出相應(yīng)的類
3、點(diǎn)擊電梯導(dǎo)航按鈕，實現(xiàn)頁面的滾動和為按鈕添加或者移出相應(yīng)的類
4、點(diǎn)擊頂部按鈕，返回頂部
代碼實現(xiàn)
html代碼
<div class="header">頭部</div> <div class="banner">焦點(diǎn)圖</div> ? ? <div class="content"> ? ? ? ? <div class="qinzi w">親子</div> ? ? ? ? <div class="liren w">麗人</div> ? ? ? ? <div class="xuexi w">學(xué)習(xí)</div> ? ? ? ? <div class="lvyou w">旅游</div> ? ? ? ? <div class="zhusu w">住宿</div> ? ? ? ? <div class="meishi w">美食</div> ? ? </div> ? ? <div class="footer">尾部</div> ? ? <!-- 電梯導(dǎo)航 --> ? ? <div class="floor" style="display: none;"> ? ? ? ? <ul> ? ? ? ? ? ? <li>親子</li> ? ? ? ? ? ? <li>麗人</li> ? ? ? ? ? ? <li>學(xué)習(xí)</li> ? ? ? ? ? ? <li>旅游</li> ? ? ? ? ? ? <li>住宿</li> ? ? ? ? ? ? <li>美食</li> ? ? ? ? </ul> ? ? ? ? <span>頂部</span> </div>?
css代碼
?*{
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? margin: 0;
? ? ? ? }
? ? ? ? body {
? ? ? ? ? ? font-size: 30px;
? ? ? ? }
? ? ? ? .header {
? ? ? ? ? ? width: 1100px;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? background-color: pink;
? ? ? ? ? ? margin: 0 auto;
? ? ? ? }
? ? ? ? .banner {
? ? ? ? ? ? width: 1100px;
? ? ? ? ? ? height: 400px;
? ? ? ? ? ? background-color: skyblue;
? ? ? ? ? ? margin: 0 auto;
? ? ? ? }
? ? ? ? .footer {
? ? ? ? ? ? width: 1100px;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? background-color: darkolivegreen;
? ? ? ? ? ? margin: 0 auto;
? ? ? ? }
? ? ? ? .content {
? ? ? ? ? ? width: 1100px;
? ? ? ? ? ? margin: 0 auto;
? ? ? ? }
? ? ? ? .content .qinzi {
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 324px;
? ? ? ? ? ? background-color: rosybrown;
? ? ? ? }
? ? ? ? .content .liren {
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 304px;
? ? ? ? ? ? background-color: slategrey;
? ? ? ? }
? ? ? ? .content .xuexi {
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? background-color: khaki;
? ? ? ? }
? ? ? ? .content .lvyou {
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? background-color: greenyellow;
? ? ? ? }
? ? ? ? .content .zhusu {
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? background-color: darkcyan;
? ? ? ? }
? ? ? ? .content .meishi {
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? background-color: lightgreen;
? ? ? ? }
? ? ? ? .floor {
? ? ? ? ? ? width: 50px;
? ? ? ? ? ? position: fixed;
? ? ? ? ? ? top: 150px;
? ? ? ? ? ? left: 50%;
? ? ? ? ? ? margin-left: -620px;
? ? ? ? ? ? font-size: 16px;
? ? ? ? ? ? text-align: center;
? ? ? ? }
? ? ? ? .floor li {
? ? ? ? ? ? width: 50px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? background-color: grey;
? ? ? ? ? ? margin-bottom: 5px;
? ? ? ? ? ? line-height: 30px;
? ? ? ? ? ? list-style: none;
? ? ? ? ? ? cursor: pointer;
? ? ? ? }
? ? ? ? span {
? ? ? ? ? ? display: block;
? ? ? ? ? ? width: 50px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? background-color: grey;
? ? ? ? ? ? margin-bottom: 5px;
? ? ? ? ? ? line-height: 30px;
? ? ? ? ? ? list-style: none;
? ? ? ? ? ? cursor: pointer;
? ? ? ? }
? ? ? ? .floor .current {
? ? ? ? ? ? background-color: hotpink;
? ? ? ? }JavaScript代碼
var flag = true; ?//使用節(jié)流閥
? ? ? ? //頁面剛開始隱藏，當(dāng)頁面滾動到content的時候，電梯導(dǎo)航顯示
? ? ? ? $(function () {
? ? ? ? ? ? //頁面刷新時調(diào)用一次
? ? ? ? ? ? //封裝函數(shù)，切換顯示與隱藏
? ? ? ? ? ? var contentTop = $(".content").offset().top;
? ? ? ? ? ? toggleTool();
? ? ? ? ? ? function toggleTool() {
? ? ? ? ? ? ? ? if ($(document).scrollTop() >= contentTop) {
? ? ? ? ? ? ? ? ? ? $(".floor").fadeIn();
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? $(".floor").fadeOut();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? $(window).scroll(function () {
? ? ? ? ? ? ? ? toggleTool()
? ? ? ? ? ? ? ? //頁面滾動到相應(yīng)位置，電梯導(dǎo)航按鈕添加current類
? ? ? ? ? ? ? ? if (flag) {
? ? ? ? ? ? ? ? ? ? $('.content .w').each(function (i, ele) {
? ? ? ? ? ? ? ? ? ? ? ? var cuHeight = ele.offsetHeight / 2;
? ? ? ? ? ? ? ? ? ? ? ? if ($(document).scrollTop() >= $(ele).offset().top - cuHeight) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? $('.floor li').eq(i).addClass('current').siblings().removeClass();
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? ? ? //點(diǎn)擊電梯導(dǎo)航按鈕，頁面跳轉(zhuǎn)到相應(yīng)位置，使用jquery里面的animate
? ? ? ? ? ? $('.floor li ').click(function () {
? ? ? ? ? ? ? ? flag = false;
? ? ? ? ? ? ? ? $(this).addClass('current').siblings().removeClass();
? ? ? ? ? ? ? ? var index = $(this).index();
? ? ? ? ? ? ? ? var current = $('.content .w').eq(index).offset().top;
? ? ? ? ? ? ? ? $('html,body').stop().animate({
? ? ? ? ? ? ? ? ? ? scrollTop: current
? ? ? ? ? ? ? ? }, function () {
? ? ? ? ? ? ? ? ? ? flag = true;
? ? ? ? ? ? ? ? })
? ? ? ? ? ? })
? ? ? ? ? ? $('.floor span').click(function () {
? ? ? ? ? ? ? ? $(this).addClass('current');
? ? ? ? ? ? ? ? $('html,body').stop().animate({
? ? ? ? ? ? ? ? ? ? scrollTop: 0
? ? ? ? ? ? ? ? })
? ? ? })
})以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
jQuery中$.ajax()和$.getJson()同步處理詳解
這篇文章主要介紹了jQuery中$.ajax()和$.getJson()同步處理詳解的相關(guān)資料，非常的細(xì)致全面，有需要的小伙伴可以參考下。2015-08-08
在jquery中給表單取值或賦值的方法我們只要簡單的$(\'表單ID\').val()即可實現(xiàn)取值了，如果賦值我們可使用$(\'表單ID\').val(\'內(nèi)容\')即可實現(xiàn)了2013-08-08
這篇文章主要介紹了jQuery遮罩層效果,結(jié)合實例形式較為詳細(xì)的分析了jQuery實現(xiàn)遮罩層的原理與相關(guān)技術(shù)細(xì)節(jié),需要的朋友可以參考下2016-01-01
這篇文章主要針對jQuery頁面刷新問題為大家進(jìn)行詳細(xì)分析，包括局部刷新、全部刷新，感興趣的朋友可以參考一下2016-01-01
jQuery使用手冊之二 DOM操作...2007-03-03
用jquery實現(xiàn)輸入框獲取焦點(diǎn)消失文字
文本框中經(jīng)常會有提示你輸入的信息，當(dāng)你點(diǎn)擊文本框，提示信息自動消失，下面也為大家介紹下輸入框消失文字的方法，感興趣的朋友可以參考下2013-04-04
這篇文章主要為大家詳細(xì)介紹了jQuery繼承extend用法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
jquery實現(xiàn)點(diǎn)擊按鈕顯示與隱藏效果
這篇文章主要為大家詳細(xì)介紹了jquery實現(xiàn)點(diǎn)擊按鈕顯示與隱藏效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
jquery 子窗口操作父窗口的實現(xiàn)代碼。2009-09-09
下面小編就為大家?guī)硪黄獪\談jQuery框架Ajax常用選項。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07