js实现导航吸顶效果
话不多说，请看代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>38demo</title>
<link rel="stylesheet" href="img/mobile-reset.css" rel="external nofollow" />
<style type="text/css">
html,body{
width:100%;
height:100%;
}
.title{
width:100%;
margin-bottom:20px;
background: #fff;
}
.titleTap{
position:fixed;
left:0;
top:0;
}
.a1{
margin-top:20px;
}
.title li{
width:33%;
float:left;
text-align: center;
}
.content{
text-align: center;
margin-top:20px;
z-index:100;
}
</style>
</head>
<body>
<!--other-->
<div class="topHeight">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
<!--title-->
<ul class="title clearfix">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!--content-->
<ul class="content a1">
<li>11</li>
<li>13</li>
<li>14</li>
<li>21</li>
<li>22</li>
<li>23</li>
</ul>
<ul class="content a2">
<li>21</li>
<li>22</li>
<li>23</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>21</li>
<li>22</li>
<li>23</li>
</ul>
<ul class="content a3">
<li>31</li>
<li>32</li>
<li>33</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>21</li>
<li>22</li>
<li>23</li>
</ul>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
function nav(){
var height=0;
height = $(".topHeight").height();
$(window).scroll(function() {
var w = $("body").scrollTop() || $(document).scrollTop(); //获取滚动值
if(w > height) {
$(".title").addClass("titleTap");
} else if(w <= 0){
$(".title").removeClass("titleTap")
}else{
$(".title").removeClass("titleTap")
}
});
}
nav();
$(function() {
$(".title li").click(function() {
var index = $(this).index();
var offsetH = $(".content").eq(index).offset().top;
console.log(index);
console.log(offsetH); $("body").animate({
scrollTop: offsetH-20,
}, 500);
})
})
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
原生js实现吸顶效果
实现思路如下: 1. div初始居普通文档流中 2. 给window添加scroll事件(可事件节流),获取div的offset的top值,滚动时scrollTop值和top比较,当到达top时给div添加一个fixed的class使其固定 3. 向上滚动时当到达div初始top时则删除fixed的class,此时div又回到普通文档流中 4. fixed样式非IE6浏览器使用position:fixed,IE6使用position:absolute和IE expression 效果图: 代码如
-
Android 实现当下最流行的吸顶效果
开始逐渐领略到ItemDecoration的美~ 今天让我 使用 ItemDecoration 来完成 可推动的悬浮导航栏的效果,最终实现的效果如下图: 具体实现步骤如下: 根据我前面的文章所讲的RecyclerView的基本使用,我们先来完成基本的recyclerView: 第一步:布局里写一个RecyclerView 第二步:实例化 recyclerView = (RecyclerView) findViewById(R.id.recyclerView); 第三步:获取所需的数据 (这里我们
-
js实现导航吸顶效果
话不多说,请看代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title&
-
js实现多个标题吸顶效果
对于导航的吸顶效果,pc端和移动端的需求可能有些差异.在pc端,我们通常只需要一个顶部导航:在移动端,在滑动页面的时候,更需要多个标题的吸顶(例如地区的选择,需要将省份吸顶). 单个标题吸顶和多个标题吸顶的区别在于:多个标题吸顶需要确定一个高度范围,在这个范围中只能有一个标题吸顶,其他都是固定效果. 一.页面布局及样式 此处为了测试效果,用了几个重复的section标签,大家根据实际需求编写布局和样式. <body> <ul id="container"> &l
-
浅谈react.js中实现tab吸顶效果的问题
在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab的position变为fixed. 在react中,我在state中设置一个navTop属性,切换这个属性的值为true或者false,然后tab标签使用classnames()这个方法来利用navTop的值添加类名fixed. 一开始我是这样写的: import cs from 'classnam
-
微信小程序实现吸顶效果
最开始的时候,在小程序中实现吸顶效果,开发工具看起来还挺好的,但是在真机上就会有问题了. 原因是我不停的去 setData 会导致操作反馈延迟严重,无法及时将操作处理结果及时传递到视图层. 后面就对代码进行了调整,避免不停的去setData 效果图 吸顶前 吸顶后 代码部分 wxml <view style="width: 90%; height: 300rpx; background: #f0f0f0; margin: 30rpx auto;"></view>
-
微信小程序wxs实现吸顶效果
在.js文件中使用page的onPageScroll事件和scroll-view的scroll事件中产生卡顿 (setData 渲染会阻塞其它脚本执行,导致了整个用户交互的动画过程会有延迟), 所以使用wxs响应事件来实现吸顶效果.wxs响应事件基础库 2.4.4 开始支持,低版本需做兼容处理. 附上文档链接:wxs响应事件 吸顶效果 使用scroll-view组件实现滚动效果,页面和scroll-view组件的高度设成100%,当竖向滚动条大于等于导航到顶部距离时,导航变成固定定位,固定显示在
-
vue中el-table实现自动吸顶效果(支持fixed)
目录 前言 实现思路 效果: 使用: 主要源码: 前言 看了很多案例,从简单的角度,position:sticky,似乎是比较理想的选择,可是当el-table设置了fixed后,这里的fixed会失效.最后还是采用了js监听滚动的思路实现. 实现思路 表格距离顶部的距离 设置表格距离顶部多少就吸顶-offsetTop1 获取滚动条滚动的距离 当滚动条滚动 offsetTop1 后,表格就自动吸顶 效果: 使用: 在el-table标签中配置:v-sticky="{ top: 0, parent
-
react-native滑动吸顶效果的实现过程
前言 最近公司开发方向偏向移动端,于是就被调去做RN(react-native),体验还不错,当前有个需求是首页中间吸顶的效果,虽然已经很久没写样式了,不过这种常见样式应该是so-easy,没成想翻车了,网上搜索换了几个方案都不行,最后去github上复制封装好的库来实现,现在把翻车过程记录下来. 需求效果 翻车过程 第一种方案 失败 一开始的思路是这样的,大众思路,我们需要监听页面的滚动状态,当页面滚动到要吸顶元素所处的位置的时候,我们设置它为固定定位,不过很遗憾,RN对于position属性
-
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
utils/index,.js /** * 生成UUID * @param withSeparator 是否有分割符 * @returns {string} */ export function generateUUID(withSeparator = true) { let d = new Date().getTime() if (window.performance && typeof window.performance.now === 'function') { d += perf
-
android中RecyclerView悬浮吸顶效果
MultiType-Adapter打造悬浮吸顶效果 注:当前版本只适合配合RecyclerView快速打造一款 展示UI 悬浮吸顶效果,如 通讯录效果,由于实现机制的原因,暂时不支持触摸事件. MultiType-Adapter介绍地址:MultiType-Adapter 是一款轻量级支持多数据类型的 RecyclerView 适配器; 使用简单,完全解耦; 悬浮吸顶效果 ```groovy // root build.gradle repositories { jcenter() maven
-
JS实现网站吸顶条
本文实例为大家分享了JS实现网站吸顶条的具体代码,供大家参考,具体内容如下 今天写一个关于网站中吸顶条的思路 1.吸顶条就是在网页移动到一定距离的时候,让某个内容,固定显示在一个位置 2.获取网页中滚动条的滚动距离 3.判断要显示的内容在滚动条,滚动到一定距离后,让他显示 下面是代码部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <