用java实现楼层导航_楼层导航
滚屏时自动高亮当前楼层对应的tab
这个其实很简单,就是侦听scroll事件,然后依据滚动高度和各楼层的offset top值,计算出与当前楼层最接近的那个楼层,最后高亮相应tab即可。
var top = $win.scrollTop();
var i = 0;
// 寻找当前楼层的序号
floorTops.forEach(function(ot, j){
if (ot <= top + navHeight) i = j;
});
cache[options.key] = i;
// 高亮对应的tab
var tab = $nav.find('li').eq(i);
if (!tab.hasClass('active')) {
highlight(tab);
}
floorTops是什么呢?它缓存了各个楼层offset top值,从而避免了不必要的频繁的页面重绘。
var floorTops = (function (nav){
var tops = [];
var floors = $(options.floor);
nav.find('li').each(function(i) {
tops[i] = Math.floor(floors.eq(i).offset().top);
});
return tops;
})($nav);
页面刷新后自动定位到原楼层
这个也不难实现,缓存当前楼层即可,比如sessionStorage。 刷新时,读取这个值,如果有且大于0,定位到对应楼层。
var curFloor = +cache[options.key];
if (curFloor) {
$nav.find('li').eq(curFloor).click();
} else { // 第一楼层或初次进入,完整显示首屏内容
window.scrollTo(0, 0);
}
这里定位到特定楼层,是通过触发对应tab的响应事件实现的:
$nav.on('click', 'li', function(){
var li = $(this);
var i = li.index();
if (!li.hasClass('active')) {
highlight(li);
}
cache[options.key] = i;
var offset = floorTops[i];
$win.scrollTop(offset - navHeight);
});
那么,为什么缓存楼层而非具体的scrollTop值呢?因为数据是动态的,每次楼层高度可能不一样,而楼层是固定的,这样至少可以避免误定位。
最后提醒一下,safari在隐私模式下,本地存储写操作会抛异常,需要检测可用性:
var cache = win.sessionStorage;
try {
cache.setItem('test', '1');
cache.removeItem('test');
} catch (e) {
cache = {};
}
另外一种方法
$(function () {
var winHeight = $(window).height(), //获取浏览器可视窗口的盖度
headerHeight = $('#showLeft').offset().top, //获取header的高度
onOff = false; //布尔值变量,通错这个变量可以防止快速连续点击的时候出现的连续滚动
console.log(headerHeight);
$(window).on('scroll', function () {
var scTop = $(window).scrollTop(); //获取滚动条的滚动距离
//当楼侧开始出现时显示楼层导航条
if (scTop >= headerHeight - winHeight) {
$('#l-scoll').fadeIn(); //也可以不传参数,传参数表示运动时间
} else {
$('#l-scoll').fadeOut();
}
//滚动时切换显示楼层
if (!onOff) {
$('.index-content-block').each(function (index, element) {
var _top = $(this).offset().top;
//当每层楼的最上面滚动到浏览器窗口的中间时切换导航条的显示
if (scTop >= _top - winHeight / 2) {
//此处添加curr类样式并不是改变显示样式,而是为了标当前所在的楼层
$('.left-list>li').eq(index).addClass('curr').children('.iconFont').show()
.end().siblings().removeClass('curr').children('.iconFont').hide();
}
});
}
})
$('.left-list>li').hover(function () {
$(this).children('.iconFont').show();
}, function () {
//此处用到.not('.curr')来过滤当前楼层,鼠标移开时仍然保持当前的显示样式
$(this).not('.curr').children('.iconFont').hide();
}).on('click', function () {
onOff = true; //将开关变量onOff置为true
var index = $(this).index(), //获取当前点击的li的索引
_top = $('.index-content-block').eq(index).offset().top;//获取相对于的楼层到文档顶部的距离
$(this).addClass('curr').children('.iconFont').show().end()
.siblings().removeClass('curr').children('.iconFont').hide();
$('html,body').animate({'scrollTop': _top}, 400, function () {
onOff = false; //在运动执行完毕的毁掉函数中将onOff的值重置为false
});
//或者也可以用scrollIntoView()方法,只是该方法没有滚动的效果,而是直接跳到浏览器可是窗口的最上面.用法如下:
/*var index = $(this).index();
$('.index-content-block').get(index).scrollIntoView();*/
});
});
用java实现楼层导航_楼层导航相关推荐
- html底部导航_松鼠导航 | 优质资源网站荟萃
笔者又搭建了一个导航网站 hao.jishusongshu.com 使用的博客平台和博客主题 --Typecho和ZMKI 之前搭建的聚合搜索参见底部 本次建站的动力:替换掉浏览器书签插件Infini ...
- java 三级菜单栏的添加_[Java教程]jquery实现的三级导航菜单实例代码
[Java教程]jquery实现的三级导航菜单实例代码 0 2016-01-02 15:00:02 jquery实现的三级导航菜单实例代码: 使用最多的可能是二级导航菜单,所以网上的代码一大堆,三级菜 ...
- 3D楼层导视—楼层导航—楼层定位解决方案
传统的楼层2D平面图已经无法满足大众对室内寻路的精准度与效率要求,为解决这一矛盾,维小帮(https://www.3dwxb.com/)自主研发了3D楼层导视导航系统,实现室内布局三维展示,跨楼层跨楼 ...
- ie9 java小程序设置_小程序 自定义导航栏
一.概念 上面整体就是自定义导航栏的区域(包括状态栏) 胶囊接口 /*获取菜单按钮(右上角胶囊按钮)的布局位置信息.坐标信息以屏幕左上角为原点 */ wx.getMenuButtonBoundingC ...
- 非常好看的网址导航_以及热点热搜影视等排行榜源码
简介: 非常好看的网址导航_以及热点热搜影视等排行榜源码 网盘下载地址:https://www.skpan.cn/qrR27WFiQPv 部分截图:
- com导航_设计师的导航网站
com导航_设计师的导航网站 com导航_设计师的导航网站 posted on 2014-06-07 23:12 lexus 阅读( ...) 评论( ...) 编辑 收藏 转载于:https:// ...
- 索引栏_网站导航栏如何设置才能促使网站SEO优化更好?
众所周知,网站导航是一个网站不可或缺的一部分,优质的网站导航栏不仅能够让访客知道自己的所在位置,还能提高访客的浏览效率,更好的提高用户体验,那么导航栏要怎样设置才能更有利于SEO优化呢?下面一起来了解 ...
- 三十二楼层选几层最好_楼层风水几楼最好 1一32高楼层选最佳楼层
现在的住房多是高层,这意味着人们的选也变多了,但是不同楼层给人的居住体验是不同的,因此人们就想了解高层中,哪些楼层比较好,下面就与小编一起看看楼层风水几楼最好,1一32高楼层选最佳楼层.(推荐阅读:楼 ...
- 三十二楼层选几层最好_一般买房买几楼比较好 1一32高楼层选最佳楼层
在购房时,很多业主都非常纠结买房买几楼比较好.都是说楼层越高越好,售楼处也是楼层越高越贵,确实高楼层空气好,噪音小,蚊虫也要少几只,为了一辈子的窝,不少的购房者都愿意多花钱,买高楼层的房子,可是并不是 ...
- android 高德地图设置不能旋转_地图导航哪家强?
导语: 我国经济在持续高速发展,我国人民的收入水平也随之水涨船高,这就使得我国人民的消费水平以及消费方式发生着日新月异的变化.现在的人们很多都喜欢旅游,或者是自驾游.但是很多情况下,我们在一个陌生的环 ...
最新文章
- Redhat7 systemctl命令
- spark 集群单词统计_最近Kafka这么火,聊一聊Kafka:Kafka与Spark的集成
- Java变量名命名规则
- 聊聊RPC之Provider
- 企业创新流程的“正向推”与“反向推”思考
- 移动开发或将被颠覆?
- Ubuntu 12.04 更新重启无法进入桌面 -转
- 【渝粤教育】国家开放大学2018年秋季 1189T政府经济学 参考试题
- Unity3D面试总结
- STM32F107的时钟设置
- mac文件管理服务器,Path Finder For Mac v8.6 高效的文件管理工具 _ 黑苹果乐园
- Java基础(五十二)-IO编程
- 玩转基因组浏览器之查看MAF文件
- python----scatter绘画散点图
- 黑群晖安装常见问题以及资源分享
- CF794E Choosing Carrot
- 《python灰帽子》笔记--构建自己的调试器
- 微软研究院分享:计算机专业求职的正确姿势
- 求助!沃尔沃S40 2.4i智雅限量版这款车怎么样,能不能买?
- python 鼠标连点脚本
热门文章
- Linux下查看网络流量常用方法
- GoldWave几种转换格式方法
- 飞机大战(简单版)(C/C++) (VS)
- windows共享 无法访问
- 单代号网络图计算例题_单代号网络图的绘制与6个时间参数的计算,一篇全掌握...
- 函数:给小学生出加法运算题,判断对错并统计得分
- 浅谈搜索引擎优化方法
- Apollo火后,深扒AI+交通产业的生态应用
- 阳/阴性预测值Positive/negative Predictive Value(推荐AA)
- python神经网络模型调用后预测值不变_用R语言实现神经网络预测股票实例