关于jQuery实现定位导航效果
本文主要为大家详细介绍了基于jQuery实现定位导航位置效果，并分享了Android九宫格图片展示的具体代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
当滚动条滚动到内容区域的时候，侧边导航条定位到屏幕，不再动，并且点击导航条跳转到内容所在的位置；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
*{
padding: 0;
margin: 0;
}
.left{
float: left;
padding: 0 0 328px 0;
}
.left p{
width: 800px;
height: 300px;
line-height: 300px;
text-align: center;
font-size: 30px;
background: gray;
margin: 10px 0;
}
.nav{
position: absolute;
right:20px;
top: 20px;
}
.nav p{
width: 100px;
height: 80px;
line-height: 80px;
text-align: center;
background: pink;
margin: 10px 0;
cursor: pointer;
}
.bottom{
overflow: hidden;
width: 100%;
position: relative;
}
</style>
<title>Document</title>
</head>
<body>
<img style="width:100%" src="o_1bsmo1kpn1hp61bm0176i1bk618uo9.jpg" alt="">
<p class="bottom">
<p class="left">
<p class="one leftp" id="one">
一
</p>
<p class="conOne leftp" id="two">
二
</p>
<p class="leftp" id="three ">
三
</p>
<p class="leftp" id="four">
四
</p>
</p>
<p class="nav">
<p class="one navp">one</p>
<p class="two navp">two</p>
<p class="three navp">three</p>
<p class="four navp">four</p>
</p>
</p>
<script src="jquery.js"></script>
<script>
$(window).scroll(function(e){
console.log($(window).scrollTop());
if ($(window).scrollTop() >$('#one').offset().top) {
$('.nav').css({'position':'fixed'});
console.log('ss');
} else{
$('.nav').css({'position':'absolute'});
}
})
$('.nav p').click(function(){
var i = $('.navp').index(this);
var x = $('.leftp').eq(i).offset().top;
$('html, body').animate({scrollTop:x+'px'},500);
})
</script>
</body>
</html>相关推荐：
Fullpage.js固定导航栏-实现定位导航栏_javascript技巧
以上是关于jQuery实现定位导航效果的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
苹果无线耳机丢了怎么定位_苹果无线耳机定位方法
Mar 23, 2024 am 08:21 AM
1、首先，我们打开手机上的【查找】App，在设备界面的列表中选择设备。2、然后，可以查看位置，还可以点击路线导航过去。
jQuery中如何使用PUT请求方式？
Feb 28, 2024 pm 03:12 PM
jQuery中如何使用PUT请求方式？在jQuery中，发送PUT请求的方法与发送其他类型的请求类似，但需要注意一些细节和参数设置。PUT请求通常用于更新资源，例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先，确保引入了jQuery库文件，然后可以通过以下方式发送PUT请求：$.ajax({u
jQuery小技巧：快速修改页面所有a标签的文本
Feb 28, 2024 pm 09:06 PM
标题：jQuery小技巧：快速修改页面所有a标签的文本在网页开发中，我们经常需要对页面中的元素进行修改和操作。在使用jQuery时，有时候需要一次性修改页面中所有a标签的文本内容，这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本，同时给出具体的代码示例。首先，我们需要引入jQuery库文件，确保在页面中引入了以下代码：<
高德地图怎么定位对方手机位置_高德地图定位对方手机位置方法
Apr 01, 2024 pm 02:11 PM
1、点击进入自己手机的高德地图软件。2、再点击右下角的我的。3、点击进入家人地图。4、点击创建我的家人地图。5、创建成功后，会出现邀请码，分享给另外一台手机。
高德地图推出升级版驾车 ETA 服务：实时解析当前路况，预估到达时间更精准
Apr 30, 2024 am 08:37 AM
本站4月29日消息，高德地图官宣推出升级版的驾车ETA（本站注：ETA即预估到达时间，指的是用户在当前时刻出发按照给定路线前往目的地预计需要的时长）服务，该服务旨在帮助用户的路线规划时长和路况预估更为精准，辅助用户进行出行决策。该地图应用是最新升级的高德地图App，引入了“超大规模图卷积神经网络模型”，该模型可以更好地捕捉和学习交通流动规律，支持城市道路网络、高速公路系统，能以高精度刻画交通状况的时空动态变化。在此外，全新版本的地图还进一步融合了iTransformer时序预测模型，支持实时解析
使用jQuery修改所有a标签的文本内容
Feb 28, 2024 pm 05:42 PM
标题：使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库，被广泛用于处理DOM操作。在网页开发中，经常会遇到需要修改页面上链接标签（a标签）的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标，并提供具体的代码示例。首先，我们需要在页面中引入jQuery库。在HTML文件中添加以下代码：
他趣怎么改定位位置信息 修改所在地址的方法
Mar 12, 2024 pm 09:52 PM
我们大家都是非常清楚的知道他趣APP是一款非常可靠的聊天社交的平台，现在都能够让大家好好的进行线上网络交友，这里的一些交友的形式，主要都是让大家进行位置交友的哦，就是这么的简单直接，毕竟这里都能够自动的为你们定位当前的位置信息，更好的为你们匹配到一些距离相近的同城好友，让大家都能更加聊得来，都感到特别的开心，那么很多的一些时候，大家为了想要认识更多一些别的地方的朋友们，都是产生了想要进行地址修改的想法，但是大家不知道该如何修改自己的定位位置的信息，十分困扰，所以本站小编也是收集出来了一些具体
华为手机丢失后怎样快速查找手机位置？
Mar 24, 2024 am 08:48 AM
在当今社会，手机已经成为我们生活中不可或缺的一部分。华为手机作为一款知名的智能手机品牌，深受广大用户的喜爱。然而，随着手机的普及和使用频率的增加，手机丢失的情况也屡有发生。一旦手机丢失，我们往往会感到焦虑和困惑。那么，如果不幸丢失了华为手机，该如何快速找回手机位置呢？第一步：使用手机定位功能华为手机内置了强大的定位功能，用户可以通过手机设置中的“安全”选项进
