jQuery实现点击左侧固定导航栏，页面滑动展示相应页面内容相对应
qiyuwang 2024-10-30 05:32 9 浏览 0 评论
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内容滑动与导航时时对应</title>
</head>
<link rel="stylesheet" href="../../script/bootstrap/dist/css/bootstrap.min.css">
<script type="text/javascript" src="../../jquery-1.10.2.js"></script>
<script type="text/javascript" src="mundo-test.js"></script>
<style type="text/css">
.sidenav{
font-weight: bold !important;
color: red !important;
background: #0f0f0f !important;
display: inline-block;
height: 40px;
width: 100px;
margin-top: 20px;
font-size: 20px;
text-align: center;
padding-top: 6px;
}
.sidenav-first{
font-weight: normal;
color: #74aaf9;
background: #e8f2ff;
display: inline-block;
height: 40px;
width: 100px;
margin-top: 20px;
font-size: 20px;
text-align: center;
padding-top: 6px;
}
.test{
background: antiquewhite;
font-size: 18px;
color: blueviolet;
padding: 23px 50px;
margin-top: 20px;
}
p{
line-height: 40px;
}
</style>
<body>
<div class="col-sm-2">
<div id="menu" style="position: fixed;">
<ul>
<li><a href="#test1" class="sidenav-first sidenav test1">首页</a></li>
<li><a href="#test2" class="sidenav-first test2">第一页</a></li>
<li><a href="#test3" class="sidenav-first test3">第二页</a></li>
<li><a href="#test4" class="sidenav-first test4">第三页</a></li>
<li><a href="#test5" id="test-last" class="sidenav-first test5">第四页</a></li>
</ul>
</div>
</div>
<div class="col-sm-10">
<div id="content">
<div class="test" id="test1">
<h1>首页</h1>
<p>
作曲 : 家家
作词 : 家家
编曲：家家
还有什么等待还有什么悲哀
这故事中的人不太精彩
夏去了又回来而人却已不在
它重复着我汹涌的忍耐
今年兰花又开开了它也会败
我想
把心慢慢的释怀
我知道从一开始随随便便深深浅浅
不过是爱的自由不计前嫌不知疲倦
永远太远走远遥远
不过是爱的自由不计前嫌不知疲倦
永远太远走远遥远
放开不再拖欠
</p>
</div>
<div class="test" id="test2">
<h1>第一页</h1>
<p>
作曲 : 李双飞
作词 : 施人诚
我好久没来这间餐厅
没想到已经换了装潢
角落那窗口闻的到玫瑰花香
被你一说是有些印象
我没有说谎我何必说谎
你知道的我缺点之一就是很健忘
我哪有说谎
是很感谢今晚的相伴
但我竟然有些不习惯
我知道从一开始随随便便深深浅浅
不过是爱的自由不计前嫌不知疲倦
永远太远走远遥远
放开不再拖欠oh
陪伴三个季节还是承受决裂
曾经是心心念念
随随便便深深浅浅
爱上了不语不言不计前嫌不知疲倦
向后向前遇见改变
那残破疲倦
永远太远走远遥远
放开不再拖欠
</p>
</div>
<div class="test" id="test3">
<h1>第二页</h1>
<p>
作曲 : 花粥
作词 : 姬霄
编曲/混音：马雨阳
劫过九重城
夙愿只隔一箭
黄昏下模糊的侧脸
遗忘了伤痛的少年
</p>
</div>
<div class="test" id="test4">
<h1>第三页</h1>
<p>
作曲 : 简弘亦
作词 : 海雷
编曲：丁培峰
不愿染是与非 怎料事与愿违
心中的花枯萎 时光它去不回
但愿洗去浮华 掸去一身尘灰
再与你一壶清酒 话一世沉醉
不愿染是与非 怎料事与愿违
心中的花枯萎 时光它去不回
一场回忆 生生灭灭 了了心扉
再回首浅尝心酒余味
一场回忆 生生灭灭 了了心扉
再回首浅尝心酒余味
作曲 : 脱景麟
作词 : 宜宝
编曲：冯聪
录音：冯聪/刘天鸿
混音：刘天鸿
母带 : 刘天鸿
秋天里的落叶挥手同树道别
</p>
</div>
<div style="margin-bottom: 500px;" class="test" id="test5">
<h1>第四页</h1>
<p>
作曲 : 刘伟锋
作词 : 刘伟锋
编曲：刘伟锋
录制混缩：巨人先生
出品：西亚斯音频工作室
企划：谭梦
发行公司：恬音文化
说好带你流
最后一句感谢还有多余的抱歉
奔跑在街上大雨淋湿的视线
反反复复的自我欺骗
再分开在之前
没有勇气想的更远
黄昏下模糊的侧脸
遗忘了伤痛的少年
有风险才蜕变
时间总会说出再见
曾经是心心念念随随便便深深浅浅
爱上了不语不言不计前嫌不知疲倦
向后向前遇见改变
</p>
</div>
</div>
</div>
</body>
</html>
$(document).ready(function () {
window.addEventListener("scroll", function(event) {
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
$(window).scroll(function () {
var top = $(document).scrollTop(); //定义变量，获取滚动条的高度
//var menu = $("#menu"); //定义变量，抓取#menu
var items = $("#content").find(".test"); //定义变量，查找.item
var curId = ""; //定义变量，当前所在的楼层item #id
items.each(function () {
var m = $(this); //定义变量，获取当前类
var mHeight = m.height();
var itemsTop = m.offset().top; //定义变量，获取当前类的top偏移量
if (top >= itemsTop - mHeight/2) {
curId = "#" + m.attr("id");
if(curId == "#test5"){
var menu = $("#menu");
var curLink = menu.find(".sidenav");
curLink.removeClass("sidenav");
menu.find("[href='#test5']").addClass("sidenav");
}else{
//给相应的楼层设置cur,取消其他楼层的cur
var menu = $("#menu");
var curLink = menu.find(".sidenav");
if (curId && curLink.attr("href") != curId) {
curLink.removeClass("sidenav");
menu.find("[href=" + curId + "]").addClass("sidenav");
}
}
} else {
return false;
}
});
});
});
});
相关推荐
- 别再乱找了!这才是 Alist 本地安装挂载的正确打开方式
-
一、探秘Alist的神奇世界在这个数据爆炸的时代，我们的生活里充斥着各种各样的网盘服务，百度网盘、阿里云盘、腾讯微云等等，它们成了我们存储资料的得力助手。但随着网盘数量的增多，管理这些分散在不同平...
- 如何将数据从旧iPhone传输到新iPhone 16?这五个方法你必须知道!
-
前不久，苹果发布了备受期待的iPhone16系列，新机型搭载了更强大的芯片、更流畅的操作体验，还有备受热议的全新摄像系统。无论你是冲着A18仿生芯片，还是更丰富的动态岛功能，相信很多果粉早已跃跃欲试...
- 大数据传输的定义与大数据传输解决方案的选择
-
当我们需要处理大量的数据时，我们就要把数据从一个地方移动到另一个地方。这个过程就叫做大数据传输。它通常需要用到高速的网络连接、分散的存储系统和数据传输协议，以保证数据的快速、可靠和安全的移动。常用的大...
- 【工具】在线传输文件工具（在线文件互传）
-
前言在线传输文件工具主要是用于在不同的设备之间，如手机、电脑、平板等快速便捷地传送文件。告别使用USB传统传输文件的方式。...
- 如何使用 CAN-FD 在 LPC5500 上传输数据
-
目录1引言2CAN-FD3示例演示1引言...
- 轻松同步:将照片从三星手机传输到iPad的简便方法
-
概括想要在新iPad上查看三星照片吗？但是，如果您不知道如何将照片从三星手机传输到iPad，则无法在iPad上查看图片。为此，本文分享了7个有用的方法，以便您可以使用它们在不同操作系统之...
- 常见又地道的网络缩写:美剧中常说的SFW到底是个啥?
-
在这堂课中，让我们来学习更多在数字网络世界中常用的有趣网络用语。7shifts/unsplashhttp,https“http”和“https”是万维网（www）传输文件用的协议。“http”是hy...
- 每天学会一个计算机网络协议之FTP
-
开始行文之前提出一个问题，相信大家在看完本文后一定可以回答当我们在网站上填写注册信息的时候，需要我们上传照片，上传的过程发生了什么？下面引入我们的主角，FTP文件传输协议FTPFileTransf...
- 即用即走，这3款文件分享工具真香
-
打工人的日常，免不了「文件分享存储服务」的需求。我们一般会选择不同的网盘，但是大家也知道，网盘不是限速就是叫你充值。今天跟大家简单推荐3款文件分享工具，既可以免登录匿名使用，而且操作简单稳定性也不错。...
- 安卓手机里的文件和照片与Mac互传的办法
-
因为HandShake一段时间未更新，似乎目前不可操作。我一时间未找到更好的「传输」办法，经实践操作，向大家介绍一下「安卓手机」，包括「一加」、「索尼」，都可用此方法，来进行文件传输到Mac的...
- 软网推荐:同一个平台选择不同的传输方法
-
平时上网的时候，我们经常要分享一些文件给其他朋友，一般通过云服务平台来实现。今天笔者给大家介绍的Worksphere传输服务，它提供了两种不同的分享方式，方便我们根据实际需要进行选择。一个链接分享所有...
- 跨平台不限速的免费文件传输网站（跨平台不限速的免费文件传输网站是什么）
-
大家好，欢迎来到天天惠分享，不知道各位平时都是用什么方法来进行文件跨平台传输的呢？是百度网盘?微信还是QQ?亦或是有线传输。虽然这些方法都可以达到传输的目的，但都有各自的缺陷，使用起来一言难尽。比如百...
- 全网最全最详细的全平台文件传输方法，解决你文件传输问题(一)
-
前言想必现在大多数人文件传输的方法还是使用qq微信，但是qq微信的文件传输有时候真是，...
- 文件传输工具有哪些?这3款堪称办公必备!
-
在不同设备间，想把文件从一台设备传输到另一台，尤其是大体积文件，更是免不了用到文件传输工具，可以说文件传输工具已成为提升效率的关键载体。面对海量文档、设计素材、会议纪要的流转需求，传统邮件附件、U盘拷...
- 小白也能用的跨网文件交换系统!10款简单易上手的文件摆渡工具
-
跨网文件交换系统对于需要频繁在不同网络环境中进行文件共享的用户来说至关重要。以下是10款简单易上手的文件摆渡工具，适合小白用户使用，帮助他们高效地分享和传输文件。10款简单易上手的跨网文件交换工具1....
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- navicat无法连接mysql服务器 (65)
- 下横线怎么打 (71)
- flash插件怎么安装 (60)
- lol体验服怎么进 (66)
- ae插件怎么安装 (62)
- yum卸载 (75)
- .key文件 (63)
- cad一打开就致命错误是怎么回事 (61)
- rpm文件怎么安装 (66)
- linux取消挂载 (81)
- ie代理配置错误 (61)
- ajax error (67)
- centos7 重启网络 (67)
- centos6下载 (58)
- mysql 外网访问权限 (69)
- centos查看内核版本 (61)
- ps错误16 (66)
- nodejs读取json文件 (64)
- centos7 1810 (59)
- 加载com加载项时运行错误 (67)
- php打乱数组顺序 (68)
- cad安装失败怎么解决 (58)
- 因文件头错误而不能打开怎么解决 (68)
- js判断字符串为空 (62)
- centos查看端口 (64)