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. MVC中修改报错

    修改的时候有空值传入.

  2. Android 检查是否安装SD卡

    /** * 检查是否安装SD卡 * @return */ public static boolean checkSaveLocationExists() { String sDCardStatus = ...

  3. Entity Framewor 学习笔记 (碎碎的东西)

    Proxy 类代理类是为了让EF实现lazy load才需要的 public class BloggingContext : DbContext {     public BloggingContex ...

  4. Javascript Promise 学习 (中)

    时隔多日,对promise有了多一点点的了解. 最近用angularjs 做开发,所以研究了一下它的 $q 功能不算很强大,算是简化版的 Q.js 参考了一下源码,不过我的等级还差很多... 作为学习 ...

  5. SignalR 的跨域支持

    How to establish a cross-domain connection Typically if the browser loads a page from http://contoso ...

  6. 用Doxygen生成文档

    我是生成C/C++的文档,输出html格式的文档.就不做成CHM了. 注释要这种写:(当然,有数种注释风格,选择任意你喜欢的就行) /** * * 一系列的doxygen的 command * * * ...

  7. Red Gate - SQL Source Control实现对SQL SERVER 的源代码控制

    原文地址:http://bbs.csdn.net/topics/350165431 SQL Server 一直没有一款很好的源码控制器,之前自己曾尝试自己写一个,将所有的 脚本 自动生成到某一目录下, ...

  8. DPDK2.1 linux上开发入门手册

    1引言 本文档主要包含INTEL DPDK安装和配置说明.目的是让用户快速的开发和运行程序.文档描述了如何在不深入细节的情况下在linux应用开发环境上编译和运行一个DPDK应用程序. 1.1文档总览 ...

  9. java 截取字符串 拆分字符串

    例如 想要吧"90_python" 分成“90” 和“python” 从网上看到的方法: public class splitTest { public static void m ...

  10. 全文搜索-介绍-elasticsearch-definitive-guide翻译

    全文搜索 我们通过前文的简单样例,已经了解了结构化数据的条件搜索:如今.让我们来了解全文搜索-- 如何通过匹配全部域的文本找到最相关的文章. 关于全文搜索有两个最重要的方面: 相似度计算 通过TF/I ...