日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無(wú)先后，達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

使用jquery庫(kù)實(shí)現(xiàn)電梯導(dǎo)航效果_jquery

作者：smile-linlin001 ? 更新時(shí)間： 2022-04-26 編程語(yǔ)言

一般來(lái)說(shuō)，一些大型的電商網(wǎng)站首頁(yè)，頁(yè)面內(nèi)容很多，頁(yè)面會(huì)很長(zhǎng)，這時(shí)候大部分網(wǎng)站都選擇使用電梯導(dǎo)航，使頁(yè)面跳轉(zhuǎn)到相應(yīng)位置或者返回頂部。

下面使用jquery庫(kù)來(lái)實(shí)現(xiàn)電梯導(dǎo)航

基本思路

電梯導(dǎo)航基本上就是使用元素距離頁(yè)面頭部的高度offsetTop和頁(yè)面滾動(dòng)的距離scrollTop來(lái)進(jìn)行比較事項(xiàng)相應(yīng)的效果。

1、頁(yè)面滾動(dòng)到相應(yīng)的位置，實(shí)現(xiàn)電梯導(dǎo)航的顯示與隱藏
2、頁(yè)面滾動(dòng)到相應(yīng)的位置，電梯導(dǎo)航的按鈕添加或者移出相應(yīng)的類
3、點(diǎn)擊電梯導(dǎo)航按鈕，實(shí)現(xiàn)頁(yè)面的滾動(dòng)和為按鈕添加或者移出相應(yīng)的類
4、點(diǎn)擊頂部按鈕，返回頂部

代碼實(shí)現(xiàn)

html代碼

頭部


? ? 

? ? ? ? 
親子

? ? ? ? 
麗人

? ? ? ? 
學(xué)習(xí)

? ? ? ? 
旅游

? ? ? ? 
住宿

? ? ? ? 
美食

? ? 

? ? 

? ? 
? ? ?

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é)流閥
? ? ? ? //頁(yè)面剛開(kāi)始隱藏，當(dāng)頁(yè)面滾動(dòng)到content的時(shí)候，電梯導(dǎo)航顯示
? ? ? ? $(function () {
? ? ? ? ? ? //頁(yè)面刷新時(shí)調(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è)面滾動(dòng)到相應(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)航按鈕，頁(yè)面跳轉(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
? ? ? ? ? ? ? ? })
? ? ? })
})

原文鏈接：https://blog.csdn.net/suannai01/article/details/101000719

欄目分類
最近更新