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. 存储过程中拼接sql的示例

    create or replace package body CRF_CMS_DOCTOR_PKG is --根据医院查询医生PROCEDURE P_HOSPITALBYDOCTOR_LIST ( v ...

  2. pin导致路由器死掉的解决方法

    首先检测网卡: ifconfig -a 然后模拟端口: airmon-ng start wlan0 接下来用: airodump-ng mon0 扫描ap找到你pin死的路由器mac 用mdk3 做身 ...

  3. Moxon(摩克森)天线介绍

    一.Moxon(摩克森)天线介绍Moxon天线是一种方形天线,性质上类似二单元Yagi(八木),增益高,具有很强的方向性,按尺寸做好后几乎不用调试,阻抗50欧姆.在U段,天线尺寸小,便于携带,是一款非 ...

  4. 检测鼠标键盘多久没有活动(使用GetLastInputInfo API函数检测)

    DELPHI代码 unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Contro ...

  5. Python web.py 实例和源码分析:

    示例: http://jyd.me/python/cookie-and-session/ simple to do:http://simple-is-better.com/news/309 http: ...

  6. oschina企业应用

    企业应用 6企业搜索引擎 20ESB企业服务总线 34LaTeX排版系统 32软电话交换机/VOIP/PBX 9邮件列表管理 42大数据 21开源医疗项目 12人力资源管理 15家庭自动化系统 16E ...

  7. tarjan缩点

    整理了下模板... #include<iostream> #include<cstdio> #include<cmath> #include<algorith ...

  8. ACM2055_ctype.h_cctype

    #include<iostream> int main() { using namespace std; int y,count; char x; cin>>count; wh ...

  9. GF(2^8)乘法

    最近在学AES,实现了一下伽罗瓦域(2^8)乘法. 至于什么是伽罗瓦域解释起来比较复杂,我也不一定能解释清楚,自行google.这里只是给出一个简单直观的实现. #include<iostrea ...

  10. Scala-变量、常量和懒加载

    package com.mengyao.scala.function /** * Scala的变量声明和使用(可变类型和值类型) *  * @author mengyao */object Test0 ...