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 所说的吸顶效果就是在页面没有滑动之 ...
随机推荐
- 转:用 git 下载 uboot 源码
1. 起因: 想下载 uboot 源码,原先的方法都是下载压缩包,然后放到虚拟机上的 Ubuntu ,再解压. 在看 uboot 源码的时候,发现 v2016.01 版本的uboot中关于 board ...
- Ubuntu 下升级git到最新版
$ sudo add-apt-repository ppa:git-core/ppa $ sudo apt-get update $ sudo apt-get install git
- SQL viewId 比较好看的 Id
有时候我们希望 Id 要好看一些,比如 Id=1 -> Id=T000001 refer : http://www.kodyaz.com/t-sql/custom-sequence-string ...
- Android开发程序获取GPS信息步骤
1.获取LOCATION_SERVICE系统服务.2.创建Criteria对象,调用该对象的set方法设置查询条件.3.调用LocationManager.getBestProvider(Criter ...
- 警惕P2B模式
大家都知道P2P是什么,估计也有很多人了解P2B的意思,这里也不多做解释,但是为什么要警惕P2B,这里我要做详细说明,希望能给大家一个参考. 首先我们要把P2B分成两种,一种是针对大型企业, ...
- <Win32_9>有意思的程序——抓取屏幕
Win32学了一段时间了,跟着杨老师的脚步,准备学习MFC,因此最近几天在复习C++,于是发现有将近一周没写博文了…… 今天来写一个较为简单.但是比较有意思的东西 不知大家在理发店理发的时候注意到一个 ...
- 从一些简单代码实例彻底理解面向对象编程思想|OOP本质是什么?
从Rob Pike 的 Google+上的一个推看到了一篇叫<Understanding Object Oriented Programming>的文章,我先把这篇文章简述一下,然后再说说 ...
- SEO_Alexa排名
1.Alexa排名是评价某一网站访问量的一个指标,对SEO优化没有任何作用,这个数据是可以做假的,考虑Alexa排名纯粹是在浪费时间. 2.Alexa排名是针对已经在浏览器中安装了Alexa Tool ...
- DevExpress之进度条
progressBarControl和marqueeProgressBarControl 一.progressBarControl progressBarControl是一个进度条控件 几个重要参数 ...
- IOS学习笔记(四)之UITextField和UITextView控件学习
IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...