<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="base.css"/>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<style>
.t-container{}
.t-container h3{ line-height: 2em;}
.t-container p{ height: 200px; background-color: #808080;}
.fix-menu{ background: #f60; color: #fff; width: 120px; position: fixed; top: 200px; left: 0px;}
.fix-menu li{ padding-left: 8px; line-height: 2em;}
.fix-menu .fix-snav-hover{ font-weight: bold; background-color: #0099FF;}
.fix-menu .fix-snav-hover:after{ content: "[在读]";}
</style>
</head>
<body>
<div style="height: 2000px;"></div>
<div class="t-container g-w" id="container">
<h3>小标题一</h3>
<p style="height: 600px;"></p>
<h3>小标题二</h3>
<p style="height: 80px;"></p>
<h3>小标题三</h3>
<p style="height: 2600px;"></p>
<h3>小标题四</h3>
<p style="height: 100px;"></p>
<h3>小标题五</h3>
<p style="height: 200px;"></p>
</div>
<div style="height: 2000px;"></div>
<ul class="fix-menu" id="menu"></ul>
<script>
$(function(){
fixMenu();
})
//固定位置浮动的目录
function fixMenu(){
/**
* cont 内容
* contTit 内容里的小标题
* menu 固定位置浮动的目录
* */
var cont = $("#container"),contTit = $("#container h3"),menu = $("#menu");
/**
* contTitTop 每个内容里的小标题到窗口的顶部的高度
* winHeight 窗口的高度
* winScrollTop 窗口的顶部到网页的顶部的高度
* contBeginTop 第一个小标题到窗口的顶部的高度
* contEndTop 最后一个小标题到窗口的顶部的高度
* */
var contTitTop = 0,winHeight = 0,winScrollTop = 0,contBeginTop = 0,contEndTop = 0;
//每个内容里的小标题之间的高度
var contTitBetweenHeight = [];
for(var i=0;i<contTit.size()-1;i++){
contTitBetweenHeight[i] = contTit.eq(i+1).position().top - contTit.eq(i).position().top;
}
//获取文章的 h3 标签自动生成目录的小标题
for(var i=0;i<contTit.size();i++){
menu.append("<li>"+contTit.eq(i).text()+"</li>");
}
//因为现在才生成li元素，所以现在才获取
var menuTit = $("#menu li");
//点击目录的小标题跳转到对应的文章
menuTit.click(function(){
$('html, body').animate({
scrollTop: contTit.eq($(this).index()).offset().top-40
},600);
});
//显示当前内容的目录
$(window).scroll(function(){
winHeight = $(window).height();
winScrollTop = $(window).scrollTop();
contBeginTop = contTit.eq(0).offset().top-winScrollTop;
contEndTop = contTit.eq(0).offset().top+cont.height()-winScrollTop-winHeight;
if(contBeginTop>(winHeight-300)){ //如果头部还不到内容部分 目录的小标题不高亮
for(var i=0;i<contTit.size();i++){
menuTit.eq(i).removeClass("fix-snav-hover");
}
}else if((contEndTop+winHeight)<0){ //如果尾部还不到内容部分 目录的小标题不高亮
for(var i=0;i<contTit.size();i++){
menuTit.eq(i).removeClass("fix-snav-hover");
}
}else{ //目录的小标题开始高亮
for(var i=0;i<contTit.size();i++){
//除了最后的一个小标题
if(i<contTit.size()-1){
contTitTop = contTit.eq(i+1).offset().top-winScrollTop;
if(contTitBetweenHeight[i]>winHeight*0.5){
if(contTitTop>winHeight*0.3){
menuTit.eq(i).addClass("fix-snav-hover").siblings().removeClass("fix-snav-hover");
break;
}
}else{
if(contTitTop>contTitBetweenHeight[i]*0.5){
menuTit.eq(i).addClass("fix-snav-hover").siblings().removeClass("fix-snav-hover");
break;
}
}
}else{
menuTit.eq(i).addClass("fix-snav-hover").siblings().removeClass("fix-snav-hover");
break;
}
}
}
});
}
</script>
</body>
</html>
效果图：
相关推荐
本话题将聚焦于“JQ点击跳转固定位置和对应目录的小标题高亮”这一功能，这在网页设计中常常用于实现用户友好的导航体验。我们将探讨如何通过jQuery实现这一效果，以及相关的编程技巧。 首先，让我们理解需求的两个...
至于点击跳转固定位置，当用户点击目录项时，我们需要监听`click`事件，并使用`scrollTop`方法改变页面滚动位置，使得对应标题位于视口顶部。可以通过`$(window).scrollTop()`获取当前滚动位置，而`$(selector)....
最近开发项目有这么一个需求 有一堆A链接关键词,点击后让他跳转到百度自动搜索此关键词,js写法如下,希望可以帮到各位
JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转...
在网页设计中，jQuery（通常简称为jq）是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果。本教程将详细讲解如何使用jQuery实现点击图片后弹出大图的功能，这是一个常见的交互设计需求，能提升...
jQuery 点击按钮自动增加，和减少.
标题中的“Jq 点击滚动”指的是利用jQuery实现的一种交互效果，即当用户点击按钮时，图片会进行横向滚动。这种效果在网页设计中常见于轮播图、产品展示等场景，可以增强用户体验，使页面更具动态感。 描述中的...
这个“JQ实现DIV大小、位置拖动调整源码”是一个基于jQuery的解决方案，它使得开发者能够为网页上的元素添加动态的拖放功能，提升用户体验。 jQuery（简称JQ）是一个轻量级的JavaScript库，它简化了HTML文档遍历、...
这个函数会计算滚动条的位置，然后通过CSS修改表头和左侧列的位置，使其看起来像是固定在屏幕上的。 4. **动态调整**：在滚动事件处理函数中，可能还需要根据窗口大小的变化动态调整固定元素的宽度和高度，以确保...
在本案例中，"jQ固定背景滚动切换zip"提供了一个实现这一效果的示例。 首先，我们来理解jQuery库的基本概念。jQuery是一个高效、简洁且易用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等...
jq冻结表头，固定左侧任意几列的demo，兼容各大主流浏览器，表头可任意改变
使用`.show()`方法将隐藏的div显示出来，如果你想在点击其他地方时关闭弹窗，可以添加一个点击事件监听整个body，然后检查点击位置是否在弹窗内： ```javascript $(document).on('click', function(event) { if (!...
标题中的"jq左右侧边栏固定.rar"表明这是一个关于使用jQuery实现的左侧边栏固定、右侧内容可滑动的交互效果。在网页设计中，这种布局常见于导航菜单或者侧边工具栏，使得用户在浏览长页面时，关键的导航元素始终保持...
在网页设计中，目录菜单是组织和展示内容结构的关键元素，尤其对于大型网站或复杂的页面来说，树形目录菜单能够帮助用户快速导航到目标位置。本文将深入探讨如何使用jQuery（简称为JQ）和CSS来创建一个既美观又实用...
标题“图片弹出放大jq”指的是使用JavaScript库jQuery实现的一种图片预览功能，它允许用户点击图片后在当前页面上以弹出窗口的形式显示图片的放大版本。这种交互设计常见于网页中的产品展示或者照片画廊，提高了用户...
本资源“JQUERY固定在网站固定位置下拉自动隐藏 上滑动显示导航菜单.rar”显然关注的是一个特定的JavaScript（JS）特效，利用jQuery库实现了一个智能且互动的导航菜单。jQuery是一个轻量级的JavaScript库，它简化了...
2. **跳转**：指用户在浏览网站时，从当前页面快速移动到另一个页面或页面内的不同位置。在无刷新分页的场景下，跳转通常指的是在不同的数据分页间进行切换。 3. **jQuery**：一个快速、简洁的JavaScript库，简化...
在IT行业中，网页开发是一项重要的技能，而JavaScript库如jQuery（简称JQ）极大地简化了DOM操作和动画效果。本文将深入探讨如何使用jQuery实现智能判断固定导航条或侧边栏的功能，这是一个常见且实用的设计元素，...
"JQ-Address-Select-增加按钮点击" 提供了一种解决方案，利用jQuery（简称JQ）来实现一个高效且用户体验良好的三级联动地址选择器，并将结果集成在一个input框中。这种实现方式简化了用户输入，提升了页面交互性。 ...