ECSTORE导航吸顶功能
ecstore导航吸顶功能,在导航父元素中加入id,如:
<div id="mainNav1"></div>
在footer.html中添加以下js代码:
<script type="text/javascript">function getTop(e)
{
var offset=e.offsetTop;
if(e.offsetParent!=null) //只要还有父元素,也就是当前元素不是根节点就继续往上累计元素的高度
offset+=getTop(e.offsetParent);
return offset;
}
var myBlockTop = getTop(document.getElementById("mainNav1"));
var oneDiv=document.getElementById("mainNav1");
if(!!window.attachEvent)//ie浏览器下。
{
window.attachEvent('**croll',function(){
if(document.documentElement.scrollTop/* + (document.body.clientHeight || window.innerHTML) */>= myBlockTop)
{oneDiv.style.position="fixed";oneDiv.style.top="0";oneDiv.style.left="0";oneDiv.style.display="block";oneDiv.style.zIndex="9999999999999";oneDiv.style.height="35px";oneDiv.innerHTML = document.getElementById("mainNav").innerHTML; }
else{oneDiv.style.display="none";} });
}
if(!!window.addEventListener)//非ie浏览器下
{
window.addEventListener("scroll",function(){//document.body.scrollTop可保证chrome的正常。
if(document.documentElement.scrollTop/* + (document.body.clientHeight || window.innerHTML) */>= myBlockTop||document.body.scrollTop>=myBlockTop)
{oneDiv.style.position="fixed";oneDiv.style.top="0";oneDiv.style.width="100%";oneDiv.style.zIndex="9999999999999";oneDiv.style.display="block";oneDiv.style.height="35px";oneDiv.innerHTML =document.getElementById("mainNav").innerHTML;}
else{oneDiv.style.display="none";}
});
}</script>
测试看看效果吧~
ECSTORE导航吸顶功能的更多相关文章
- 类似吸顶功能解决ios不能实时监听onscroll的触发问题
		
问题:近期项目需要一个类似西东功能,当页面向上滚动160px后div固定在顶部 解决方法:首先,想到的是window.onscroll方法 .fixed{position:fixed;-webkit- ...
 - 微信小程序吸顶功能
		
---------------------------HTML------------------------ <view class="navbar-wrap"> ...
 - 5行js代码搞定导航吸顶效果
		
一.HTML布局 首先写HTML布局 <body> <div id="wrap"></div> </body> 二.CSS样式 给点 ...
 - React制作吸顶功能总结
		
总结一下最近用react写项目时,遇到的一些坑,恩,真的还蛮坑的,主要是设置状态的时候特别不好控制,下面我们一起来看下,这里自己做了几个demo,分别看下, 主页面代码如下: class Head e ...
 - js实现导航栏的吸顶操作
		
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
 - vue滑动吸顶以及锚点定位
		
Vue项目中需要实现滑动吸顶以及锚点定位功能.template代码如下: <template> <div class="main"> <div id= ...
 - 原生js实现吸顶导航和回到顶部特效
		
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
 - 原生js实现导航栏吸顶
		
实现滑动滚动条让导航栏吸顶原理:主要是通过监听scroll,设定一个滚动条垂直位移作为临界,让导航栏吸顶或者取消吸顶. 话不多说了,代码如下: window.onscroll = function ( ...
 - Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)
		
Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...
 
随机推荐
- MVC4,4月22日,Ninject的另外注入方式。
			
学习了Ninject另外两种绑定注入的方式: 1.根据属性绑定 先在特殊的实现借口类中定义属性 使用 2.根据构造函数方式绑定 学习了条件绑定方式(conditional bindi ...
 - $ npm install opencv ? 你试试?! 在windows环境下,使用node.js调用opencv攻略
			
博主之前写过一篇文章<html5与EmguCV前后端实现——人脸识别篇>,叙述的是opencv和C#的故事.最近在公司服务器上更新了一套nodejs环境,早就听闻npm上有opencv模块 ...
 - c#使用UIA进行模拟点击操作
			
之前,我写过一篇c#使用spy进行模拟操作的文章,有朋友在留言中提到了UIA进行操作,今天也使用UIA重新实现一次对vnc窗体的控制测试. 实现目标 在server框内填入192.168.2.200 ...
 - webserver and application server
			
http://www.diffen.com/difference/Application_Server_vs_Web_Server http://www.differencebetween.com/d ...
 - .Net框架与框架类库-转
			
http://blog.csdn.net/rrrfff/article/details/6686493 .NET Framework 具有两个主要组件:公共语言运行库和 .NET Framework类 ...
 - BZOJ3392: [Usaco2005 Feb]Part Acquisition 交易
			
3392: [Usaco2005 Feb]Part Acquisition 交易 Time Limit: 5 Sec Memory Limit: 128 MBSubmit: 26 Solved: ...
 - encodeURI和encodeURIComponent的比较
			
encodeURI和encodeURIComponet函数都是javascript中用来对URI进行编码,将相关参数转换成UTF-8编码格式的数据.URI在进行定位跳转时,参数里面的中文.日文等非AS ...
 - hdu1166敌兵布阵
			
敌兵布阵 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submi ...
 - Oracle_Q&A_03
			
1.先导入SQL文件 执行语句查看表信息 select * from student;--学生信息--(stunum,stuname,classid)select * from class;--班级信 ...
 - html(三)
			
今天自己画了个安卓机器人,之前听徐大大讲过一次,查手册去动手的时候其实发觉不是很难,这种规则的图像还是很好画的,主要是用<div>标签和<span>标签去做的,通过CSS添加样 ...