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 所说的吸顶效果就是在页面没有滑动之 ...
随机推荐
- 存储过程中拼接sql的示例
create or replace package body CRF_CMS_DOCTOR_PKG is --根据医院查询医生PROCEDURE P_HOSPITALBYDOCTOR_LIST ( v ...
- pin导致路由器死掉的解决方法
首先检测网卡: ifconfig -a 然后模拟端口: airmon-ng start wlan0 接下来用: airodump-ng mon0 扫描ap找到你pin死的路由器mac 用mdk3 做身 ...
- Moxon(摩克森)天线介绍
一.Moxon(摩克森)天线介绍Moxon天线是一种方形天线,性质上类似二单元Yagi(八木),增益高,具有很强的方向性,按尺寸做好后几乎不用调试,阻抗50欧姆.在U段,天线尺寸小,便于携带,是一款非 ...
- 检测鼠标键盘多久没有活动(使用GetLastInputInfo API函数检测)
DELPHI代码 unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Contro ...
- Python web.py 实例和源码分析:
示例: http://jyd.me/python/cookie-and-session/ simple to do:http://simple-is-better.com/news/309 http: ...
- oschina企业应用
企业应用 6企业搜索引擎 20ESB企业服务总线 34LaTeX排版系统 32软电话交换机/VOIP/PBX 9邮件列表管理 42大数据 21开源医疗项目 12人力资源管理 15家庭自动化系统 16E ...
- tarjan缩点
整理了下模板... #include<iostream> #include<cstdio> #include<cmath> #include<algorith ...
- ACM2055_ctype.h_cctype
#include<iostream> int main() { using namespace std; int y,count; char x; cin>>count; wh ...
- GF(2^8)乘法
最近在学AES,实现了一下伽罗瓦域(2^8)乘法. 至于什么是伽罗瓦域解释起来比较复杂,我也不一定能解释清楚,自行google.这里只是给出一个简单直观的实现. #include<iostrea ...
- Scala-变量、常量和懒加载
package com.mengyao.scala.function /** * Scala的变量声明和使用(可变类型和值类型) * * @author mengyao */object Test0 ...