`

侧导航-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>
分享到:
评论

相关推荐

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

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

    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...

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

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

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

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

    Z-BlogPHP海盗导航主题模板 海盗导航-zblog屋主题V1.5

    海盗导航-zblog 屋主题,Z-BlogPHP 版海盗导航主题模板。 导航是全屏,可以多展示内容。 主题分导航样式和文章样式,默认都是导航样式,如需文章样式,可在后台设置,根据需要可以编辑文章,更加有利于 SEO 优化。 ...

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

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

    侧边栏-网页效果制作

    【侧边栏-网页效果制作】是网页设计中常见的元素之一,主要位于页面两侧,用于展示导航、菜单、广告或一些附加信息。在本案例中,我们关注的是使用jQuery库来实现这一功能。jQuery是一个强大的JavaScript库,它简化...

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

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

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

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

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

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

    Android侧栏效果---使用DrawerLayout

    在Android应用开发中,侧边栏(Sidebar)通常作为一个重要的导航元素存在,它允许用户通过滑动屏幕边缘来展示或隐藏附加的菜单和功能。在本教程中,我们将深入探讨如何利用Google官方支持库中的`android.support.v4....

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

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

    WPF 侧边导航 UI框架

    WPF提供了多种导航技术,包括页面导航、控件导航和MVVM(Model-View-ViewModel)模式。页面导航使用Page类实现,允许用户在多个独立的页面之间跳转;控件导航则是通过嵌入到同一个窗口中的多个控件来实现;而MVVM...

Global site tag (gtag.js) - Google Analytics