ECSTORE导航吸顶功能

ecstore导航吸顶功能,在导航父元素中加入id,如:

1 <div id="mainNav1"></div>

在footer.html中添加以下js代码:

 1     <script type="text/javascript">function getTop(e)
 2     {
 3         var offset=e.offsetTop;
 4         if(e.offsetParent!=null) //只要还有父元素,也就是当前元素不是根节点就继续往上累计元素的高度
 5             offset+=getTop(e.offsetParent);
 6         return offset;
 7     }
 8     var myBlockTop = getTop(document.getElementById("mainNav1"));
 9     var oneDiv=document.getElementById("mainNav1");
10     if(!!window.attachEvent)//ie浏览器下。
11     {
12         window.attachEvent(‘**croll‘,function(){
13                         if(document.documentElement.scrollTop/* +  (document.body.clientHeight || window.innerHTML) */>= myBlockTop)
14                         {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; }
15                         else{oneDiv.style.display="none";}
16
17         });
18     }
19     if(!!window.addEventListener)//非ie浏览器下
20     {
21         window.addEventListener("scroll",function(){//document.body.scrollTop可保证chrome的正常。
22             if(document.documentElement.scrollTop/* +  (document.body.clientHeight || window.innerHTML) */>= myBlockTop||document.body.scrollTop>=myBlockTop)
23             {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;}
24             else{oneDiv.style.display="none";}
25         });
26     }</script>

测试看看效果吧~

时间: 2024-09-28 22:10:33

ECSTORE导航吸顶功能的相关文章

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

一.HTML布局 首先写HTML布局 <body> <div id="wrap"></div> </body> 二.CSS样式 给点简单的样式 <style> *{ margin: 0; padding: 0; } body{ height: 2000px; background-image: linear-gradient(-180deg, #15f09d 0%, #25A0FF 50%, #fca72b 100%); }

React制作吸顶功能总结

总结一下最近用react写项目时,遇到的一些坑,恩,真的还蛮坑的,主要是设置状态的时候特别不好控制,下面我们一起来看下,这里自己做了几个demo,分别看下, 主页面代码如下: class Head extends React.Component { constructor(props) { super(props); this.state = { contentClass:"conditionArea" }; this.windowOnScroll(); let isScrollTop

js实现导航栏的吸顶操作

1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 3 4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 5 <html> 6 <head> 7 <style type="text/css&

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

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>吸顶导航特效</title> 6 <style type="text/css"> 7 body{ 8 margin: 0; 9 padding: 0; 10 } 11 .main{ 12 width: 10

原生js吸顶式导航条

<!--吸顶式导航条--><nav class="nav"> <div> <a href="javascript: return false"><img src="n.jpg" ></a> <div class="topNav"> <div> <input type="text" placeholder=&

原生js实现导航栏吸顶

实现滑动滚动条让导航栏吸顶原理:主要是通过监听scroll,设定一个滚动条垂直位移作为临界,让导航栏吸顶或者取消吸顶. 话不多说了,代码如下: window.onscroll = function () { var scrollT = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条的垂直偏移 if (scrollT > xx) { //xx为临界的垂直位移值 //修改导航栏的样式,让他呈现吸顶的状态 主要

吸顶大法 -- UWP中的工具栏吸顶的实现方式之一

如果一个页面中有很长的列表/内容,很多应用都会在用户向下滚动时隐藏页面的头,给用户留出更多的阅读空间,同时提供一个方便的吸顶工具栏,比如淘宝中的店铺页面. 下面是一个比较简单的实现,如果有同学有更好的实现,欢迎留言,让我们共同进步. 首先假设我们的页面整体包含3部分; 页面头:随页面滚动慢慢消失/重现 工具栏: 开始时随页面滚动,在页面头消失后,吸顶,固定不动 可滚动内容:一个listview 结构代码如下,为了区别清楚,我是用不同的背景色做区分: 1 <Page 2 x:Class="A

基于scroll的吸顶效果

本次要实现的是一种常见的网页效果,如下: 页面由头部,导航,主体内容三部分组成,当页面发生滚动时,头部逐渐隐藏,导航部分向上移动,直到导航部分距离浏览器顶部为零时,导航部分固定不动,保持吸顶效果,如下所示: 我们分三步实现上面的效果. 首先是页面的基础结构,为了简化操作,将头部.导航部分和主体内容部分全部用图片表示. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

代码:jquery 吸顶 效果

(只是个简单吸顶效果,还需完善) 吸顶: <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(window).scroll( function() { var m =$(document).scrollTop(); console.log(