`

侧导航-20131105

 
阅读更多
.anim_nav{position: fixed; left: 50%; margin-left: 500px; top: 200px; overflow: hidden; _position: absolute; _top: expression(eval(documentElement.scrollTop+200));}


<div class="anim_nav" id="J_ActivityNav" style="position: fixed; top: 50px;">
    	<img src="http://gtms01.alicdn.com/tps/i1/T1obAtFXtgXXaoaIQ3-128-427.jpg" width="128" height="427" border="0" usemap="#Map2"/>
        <map name="Map2" id="Map2">
          <area shape="rect" coords="5,60,125,35" href="#link1" target="_self" />
          <area shape="rect" coords="5,90,125,65" href="#link2" target="_self" />
          <area shape="rect" coords="5,120,125,95" href="#link3" target="_self" />
          <area shape="rect" coords="5,150,125,125" href="#link4" target="_self" />
          <area shape="rect" coords="5,185,125,160" href="#link5" target="_self" />
          <area shape="rect" coords="5,215,125,190" href="#link6" target="_self" />
          <area shape="rect" coords="5,275,125,300" href="#link7" target="_self" />
          <area shape="rect" coords="5,305,125,330" href="#link8" target="_self" />
          <area shape="rect" coords="5,335,125,360" href="#link9" target="_self" />
          <area shape="rect" coords="5,365,125,390" href="#link10" target="_self" />
          <area shape="rect" coords="5,395,125,420" href="#" target="_self" />
        </map>
	</div>

</script>
<script type="text/javascript">
    (function () {
        //检查是否是ie6的游览器
        var nav = document.getElementById('J_ActivityNav'), isIE6 = KISSY.UA.ie === 6;
        //这里是设定高度的px
        var _top = 554;
        function navCheck () {
            //获得当前的高度
            var t = document.documentElement.scrollTop || document.body.scrollTop;
            
                //一个判断
                if (t >= _top) {
                //如果不是ie6
                if (!isIE6) {
                    //就环定位效果
                    nav.style.position = "fixed";
                    //定义样式里的高度
                    nav.style.top = '0'
                } else {
                    //否则 高度是加上t+px
                    nav.style.top = t + 'px';
                }
            } else {
                //判断时候是ie6
                if (!isIE6) {
                    //不是的话 在滚轮触及到位置 定位方式转变
                    nav.style.position = "absolute";
                    //top的距离
                    nav.style.top = _top+'px'
                } else {
                    //否则还是定义头部距离
                    nav.style.top = _top+'px';
                }
            }
        }
        //返回函数
        navCheck();
        window.onscroll = function () {
            navCheck();
        }
    })();
</script>
分享到:
评论

相关推荐

    uni-app 侧边导航分类,适合商品分类页面uni-app-left-navigation-master.zip

    "uni-app 侧边导航分类" 是一个专门为商品分类页面设计的组件。uni-app 是一个跨端框架,它允许开发者使用一套代码编写应用,同时适配iOS、Android、微信小程序、H5等多个平台。侧边导航通常指的是在应用界面左侧滑...

    深度报告-20221019-开源证券-华测导航-300627.SZ-国内高精度定位的一体化龙头-40页-3mb.pdf

    深度报告-20221019-开源证券-华测导航-300627.SZ-国内高精度定位的一体化龙头_40页_3mb.pdf 深度报告-20221019-开源证券-华测导航-300627.SZ-国内高精度定位的一体化龙头_40页_3mb.pdf 深度报告-20221019-开源证券-...

    bootstrap侧边导航栏

    侧边导航栏是Bootstrap中一个常见的元素,它通常用于网站或应用的左侧,用于展示主要的导航选项。在这个场景中,我们将深入探讨如何使用Bootstrap来创建一个简洁且功能完备的侧边导航栏。 首先,为了实现侧边导航栏...

    bootstrap4实现侧边导航栏带隐藏按钮

    在Bootstrap 4中,实现带有隐藏按钮的侧边导航栏是一项常见的需求,尤其在创建现代网页设计时。这样的导航栏可以节省空间,提升用户体验,特别是在移动设备上。 首先,要创建一个侧边导航栏,我们需要引入Bootstrap...

    bootstrap3 侧边导航栏

    这里,`navbar-inverse`类用于设置导航栏为深色背景,`sidebar`类则是Bootstrap3中用于侧边栏的样式。`role="navigation"`是一个辅助性属性,有助于无障碍访问。 然后,为了让侧边导航栏在小屏幕设备上折叠,我们...

    IOS应用源码Demo-效果很好的侧边栏导航-毕设学习.zip

    这个"IOS应用源码Demo-效果很好的侧边栏导航-毕设学习.zip"是一个用于毕业设计学习的源码示例,旨在帮助学生理解和实现这种导航方式。 首先,我们要了解侧边栏导航的核心组件。在iOS中,最常用的实现方式是使用`...

    vue设置导航栏、侧边栏为公共页面的例子

    想要让导航栏、侧边栏变为公共页面,则要在App.vue页面中加入。假设已经有了Header.vue和Left.vue,这里就不贴出来了,App.vue代码如下: &lt;!-- 其他页 --&gt; &lt;!-- 导航栏 --&gt; &lt;header&gt;&lt;/header...

    精美导航---个人博客网站

    【精美导航---个人博客网站】 在互联网世界中,个人博客是一种表达自我、分享知识和经验的重要平台。"精美导航---个人博客网站" 提供了一种精心设计的导航栏方案,旨在提升用户在浏览博客时的体验,使得内容的查找...

    麦乐导航-万达导航源码-界面美观大方

    "麦乐导航-万达导航源码" 是一个特定的网站导航系统,其源代码基于万达导航的设计风格。"麦乐导航"可能是该系统的品牌或名称,而"万达导航"则可能提供了设计灵感或者是一个已知的导航模板。这个标题暗示了这个源码包...

    工具-导航:侧伸缩导航jquery

    在这个“工具-导航:侧伸缩导航jquery”的项目中,我们聚焦于利用jQuery实现一个兼容多浏览器、适用于不同jQuery版本的侧边栏导航菜单,它具有可伸缩的特性,极大地提升了用户体验。 首先,侧导航在网页设计中占据...

    天轰穿系列教程之-66导航控件-概述

    天轰穿系列教程之-66导航控件-概述 天轰穿系列教程之-66导航控件-概述 天轰穿系列教程之-66导航控件-概述 天轰穿系列教程之-66导航控件-概述 天轰穿系列教程之-66导航控件-概述 天轰穿系列教程之-66导航控件-概述 天...

    天轰穿系列教程之-68导航控件-menu

    天轰穿系列教程之-68导航控件-menu 天轰穿系列教程之-68导航控件-menu 天轰穿系列教程之-68导航控件-menu 天轰穿系列教程之-68导航控件-menu 天轰穿系列教程之-68导航控件-menu 天轰穿系列教程之-68导航控件-menu 天...

    区块链导航-以太坊

    区块链导航-以太坊,以图示整理以太坊相关网络资源的分享。

    uniapp框架-侧边导航分类,适合商品分类页面组件-uni-app项目源码-vue语法格式.zip

    从多级选择器到自定义导航栏,再到二维码生成器,UniApp的控件封装合集为开发者提供了极大的便利。 面向未来,UniApp将继续优化性能,拓展功能,满足更多开发者的需求。如果你正在寻找一个高效、便捷的跨平台开发...

    IOS应用源码Demo-用于ipad的自定义侧边栏导航效果-毕设学习.zip

    在iOS应用开发中,自定义侧边栏导航效果是一个常见的需求,它能为用户提供便捷的交互体验,增强应用的可用性和美观性。本资源“IOS应用源码Demo-用于ipad的自定义侧边栏导航效果-毕设学习.zip”正是针对这一主题,...

    Android 仿谷歌侧边栏导航源码-IT计算机-毕业设计.zip

    在Android应用开发中,侧边栏导航(Sidebar Navigation)是一种常见的设计模式,它通常用于实现应用的主要导航结构。本项目“Android 仿谷歌侧边栏导航源码”提供了一个具体的实现示例,非常适合计算机科学与技术...

    基于html和CSS3制作简单侧边导航栏

    - &lt;div class="sidebar"&gt;&lt;/div&gt;: 用于包裹整个侧边导航栏的容器,类名sidebar定义了这个容器的样式。 - &lt;ul&gt;&lt;/ul&gt;: 无序列表用于创建导航栏的菜单项。 - &lt;li&gt;&lt;/li&gt;: 列表项用于定义每个单独的导航链接。 - &lt;a&gt;&lt;/...

    ListView 实现点击侧边A-Z快速查找_Android.rar

    当用户在侧边栏上滑动时,显示侧边栏。 7. **适配器(Adapter)的优化**: - 为了提高性能,可以使用分段(Section)的适配器,这种适配器会根据首字母将数据分成多个部分,每部分对应ListView的一个子View。这样...

Global site tag (gtag.js) - Google Analytics