用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 高德地图设置不能旋转_地图导航哪家强?
导语: 我国经济在持续高速发展,我国人民的收入水平也随之水涨船高,这就使得我国人民的消费水平以及消费方式发生着日新月异的变化.现在的人们很多都喜欢旅游,或者是自驾游.但是很多情况下,我们在一个陌生的环 ...
最新文章
- gzencode php demo,8个必备的PHP功能实例代码
- 工信部公布《通信网络安全防护监督管理办法(征求意见稿)》
- 【移动通信】4G LTE帧结构
- 【Linux网络编程】IP地址分类和介绍
- JS~重写alter与confirm,让它们变成fancybox风格
- 用Mesos分布式架构进行工作
- gulp——用自动化构建工具增强你的工作流程
- openssl学习笔记--CA及https网站证书配置
- 通达OA11.2漏洞复现
- 四足机器人——12自由度舵机狗DIY(二)
- 你的PC机或者终端,是怎么上网的?怎么连接到网络的?无线网怎么接入Internet,如何访问网络资源?
- 使用公式使用户输入年利率,贷款额度和支付年数,计算支付额度
- httpclient3.1的relaseConnection的misunderstand
- 阿里云API网关调用示例
- Chrome98和Chrome101的跨域变化,httpOPTIONS预检请求,私有网络访问限制
- 使用御剑工具,扫描网站http://43.138.211.45的后台地址
- 新闻分页---新闻发布系统
- 工作日志-2017年06月04日
- 代码整洁之道培训总结
- 华为微信主题v1.0 全新内置40+ 华为手机专用软!