首页
友链
壁纸
留言
今日热榜
更多
关于
时光
推荐
精品流量卡
Search
1
都二十多年了,你的梦为什么还没碎!
57,062 阅读
2
2022年5个好用的 BT/ 磁力链接下载工具推荐 |Windows 、安卓系统
37,217 阅读
3
nps内网穿透实现外网访问树莓派
32,390 阅读
4
实践利用宝塔建emlog个人博客-超详细【原创】
26,119 阅读
5
Typecho-Joe-Theme主题帮助文档
24,550 阅读
闲杂乱码
Python
网站源码
微信小程序
娱乐分享
Is相册
软件工具
登录
Search
标签搜索
PHP
HTML
API
Javascript
源码
JS
Vue
Github
CloudFlare
接口
函数
SQL
ASP.NET
MVC
EF
T4模板
后台管理
CDN
微信小程序
MAC
韩小韩
累计撰写
261
篇文章
累计收到
1,301
条评论
首页
栏目
闲杂乱码
Python
网站源码
微信小程序
娱乐分享
Is相册
软件工具
页面
友链
壁纸
留言
今日热榜
关于
时光
推荐
精品流量卡
搜索到
1
篇与
position
的结果
2021-07-31
HTML粘性滑块导航页面Demo - 可自由填充内容
HTML粘性滑块导航页面Demo{anote icon="fa-link" href="https://www.vvhan.com/other/demo/navslider/" type="secondary" content="点击查看效果"/}HTML 代码<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>jQuery粘性滑块导航(响应式)</title> <link rel="stylesheet" href="./style.css"> </head> <body> <section class="et-hero-tabs"> <h1>粘性滑块导航</h1> <h3>滑动内容与粘性选项卡导航</h3> <div class="et-hero-tabs-container"> <a class="et-hero-tab" href="#tab-es6">ES6</a> <a class="et-hero-tab" href="#tab-flexbox">Flexbox</a> <a class="et-hero-tab" href="#tab-react">React</a> <a class="et-hero-tab" href="#tab-angular">Angular</a> <a class="et-hero-tab" href="#tab-other">Other</a> <span class="et-hero-tab-slider"></span> </div> </section> <!-- Main --> <main class="et-main"> <section class="et-slide" id="tab-es6"> <h1>ES6</h1> <h3>something about es6</h3> </section> <section class="et-slide" id="tab-flexbox"> <h1>Flexbox</h1> <h3>something about flexbox</h3> </section> <section class="et-slide" id="tab-react"> <h1>React</h1> <h3>something about react</h3> </section> <section class="et-slide" id="tab-angular"> <h1>Angular</h1> <h3>something about angular</h3> </section> <section class="et-slide" id="tab-other"> <h1>Other</h1> <h3>something about other</h3> </section> </main> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script src="./script.js"></script> </body> </html>CSS 代码a { text-decoration: none; } .et-hero-tabs, .et-slide { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; position: relative; background: #eee; text-align: center; padding: 0 2em; } .et-hero-tabs h1, .et-slide h1 { font-size: 2rem; margin: 0; letter-spacing: 1rem; } .et-hero-tabs h3, .et-slide h3 { font-size: 1rem; letter-spacing: 0.3rem; opacity: 0.6; } .et-hero-tabs-container { display: flex; flex-direction: row; position: absolute; bottom: 0; width: 100%; height: 70px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); background: #fff; z-index: 10; } .et-hero-tabs-container--top { position: fixed; top: 0; } .et-hero-tab { display: flex; justify-content: center; align-items: center; flex: 1; color: #000; letter-spacing: 0.1rem; transition: all 0.5s ease; font-size: 0.8rem; } .et-hero-tab:hover { color: white; background: rgba(102, 177, 241, 0.8); transition: all 0.5s ease; } .et-hero-tab-slider { position: absolute; bottom: 0; width: 0; height: 6px; background: #66B1F1; transition: left 0.3s ease; } @media (min-width: 800px) { .et-hero-tabs h1, .et-slide h1 { font-size: 3rem; } .et-hero-tabs h3, .et-slide h3 { font-size: 1rem; } .et-hero-tab { font-size: 1rem; } }JS 代码class StickyNavigation { constructor() { this.currentId = null; this.currentTab = null; this.tabContainerHeight = 70; let self = this; $('.et-hero-tab').click(function() { self.onTabClick(event, $(this)); }); $(window).scroll(() => { this.onScroll(); }); $(window).resize(() => { this.onResize(); }); } onTabClick(event, element) { event.preventDefault(); let scrollTop = $(element.attr('href')).offset().top - this.tabContainerHeight + 1; $('html, body').animate({ scrollTop: scrollTop }, 600); } onScroll() { this.checkTabContainerPosition(); this.findCurrentTabSelector(); } onResize() { if(this.currentId) { this.setSliderCss(); } } checkTabContainerPosition() { let offset = $('.et-hero-tabs').offset().top + $('.et-hero-tabs').height() - this.tabContainerHeight; if($(window).scrollTop() > offset) { $('.et-hero-tabs-container').addClass('et-hero-tabs-container--top'); } else { $('.et-hero-tabs-container').removeClass('et-hero-tabs-container--top'); } } findCurrentTabSelector(element) { let newCurrentId; let newCurrentTab; let self = this; $('.et-hero-tab').each(function() { let id = $(this).attr('href'); let offsetTop = $(id).offset().top - self.tabContainerHeight; let offsetBottom = $(id).offset().top + $(id).height() - self.tabContainerHeight; if($(window).scrollTop() > offsetTop && $(window).scrollTop() < offsetBottom) { newCurrentId = id; newCurrentTab = $(this); } }); if(this.currentId != newCurrentId || this.currentId === null) { this.currentId = newCurrentId; this.currentTab = newCurrentTab; this.setSliderCss(); } } setSliderCss() { let width = 0; let left = 0; if(this.currentTab) { width = this.currentTab.css('width'); left = this.currentTab.offset().left; } $('.et-hero-tab-slider').css('width', width); $('.et-hero-tab-slider').css('left', left); } } new StickyNavigation();
2021年07月31日
1,099 阅读
2 评论
4 点赞