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导航吸顶功能的更多相关文章

  1. 类似吸顶功能解决ios不能实时监听onscroll的触发问题

    问题:近期项目需要一个类似西东功能,当页面向上滚动160px后div固定在顶部 解决方法:首先,想到的是window.onscroll方法 .fixed{position:fixed;-webkit- ...

  2. 微信小程序吸顶功能

    ---------------------------HTML------------------------ <view class="navbar-wrap">  ...

  3. 5行js代码搞定导航吸顶效果

    一.HTML布局 首先写HTML布局 <body> <div id="wrap"></div> </body> 二.CSS样式 给点 ...

  4. React制作吸顶功能总结

    总结一下最近用react写项目时,遇到的一些坑,恩,真的还蛮坑的,主要是设置状态的时候特别不好控制,下面我们一起来看下,这里自己做了几个demo,分别看下, 主页面代码如下: class Head e ...

  5. js实现导航栏的吸顶操作

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  6. vue滑动吸顶以及锚点定位

    Vue项目中需要实现滑动吸顶以及锚点定位功能.template代码如下: <template> <div class="main"> <div id= ...

  7. 原生js实现吸顶导航和回到顶部特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 原生js实现导航栏吸顶

    实现滑动滚动条让导航栏吸顶原理:主要是通过监听scroll,设定一个滚动条垂直位移作为临界,让导航栏吸顶或者取消吸顶. 话不多说了,代码如下: window.onscroll = function ( ...

  9. Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)

    Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

随机推荐

  1. ubuntu14.04使用reaver跑pin码

    今天刚说过没找到支持ubuntu14.04用reaver跑pin的旧版库文件这就有摸索到方法了... 另外安装系统ubuntu14.04以及一系列破解工具比如aircrack,minidwep等都不在 ...

  2. 游览器保存密码和自动填充密码的困惑 (browser save password and auto fill password )

    原文 refer : http://www.cnblogs.com/happyfreelife/p/4240100.html 当一个带有username and password 的表单被提交, 游览 ...

  3. 51单片机C51毫秒级(ms)精确延时

    如下程序能实现ms毫秒级的比较精确的延时 void Delayms(unsigned int n) { unsigned int i,j; ;j--) ;i>;i--); } 用keil可以看出 ...

  4. QT:不规则窗口的实现

    主要思路:1:将窗体设为Qt::FramelessWindowHint(去掉标题栏).2:用一幅有部分区域是透明的图片作为程序的界面,并将图片透明的地方设为穿透. 3:重载程序的鼠标事件. 运行时截图 ...

  5. WIN7笔记本显示连接不可用

    如图所示,找不到任何无线网络 解决方法: 不小心把无线关掉而已,笔记本键盘上F5~F12找看看有没有无线标志,有的话要先按下 Fn键不放,再按下那个有无线标志的Fn键.

  6. 【细说Java】揭开Java的main方法神秘的面纱

    大家都知道,main方法是Java应用程序的入口,其定义格式为: public static void main(String[] args) 可是为什么要这么定义呢?不这样定义可以么?main方法可 ...

  7. Css定位-定位

    在CSS中一共有N种定位方式,其中,static ,relative,absolute三种方式是最基本最常用的三种定位方式.他们的基 本介绍如下. static默认定位方式 relative相对定位, ...

  8. Java IntelliJ IDEA 不能显示项目里的文件结构解决办法

    按下列步骤操作: 1. 关闭IDEA,  2.然后删除项目文件夹下的.idea文件夹 3.重新用IDEA工具打开项目

  9. (转)关于Android的nodpi,xhdpi,hdpi,mdpi,ldpi

    首先是几个基本概念:1.屏幕尺寸Screen size即显示屏幕的实际大小,按照屏幕的对角线进行测量.为简单起见,Android把所有的屏幕大小分为四种尺寸:小,普通,大,超大(分别对应:small, ...

  10. HRBUST 1987 逃课的孩子

    Sol:HASH + 二分  字符串处理,很基础的操作. 题意很明确就是找重复的次数统计下,范围比较大1≤n≤10000,1≤m≤10000. #include <cstdio> #inc ...