`
砺雪凝霜
  • 浏览: 156361 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

模仿阿里巴巴楼层导航特效

阅读更多
  •  特效要求:

         1.  右边导航楼层是随着滚动条的滚动位置是不动的

         2.  当滚动条滚动时,导航的div页面在我们页面的上方位置时(视野最明显的位置),对应的右边导航

              的楼层的样式,会发生相应的变化。

         3.  点击右边导航楼层的顶部或者底部,楼层会消失,显示。

         4.  楼层下方置顶功能。

         5.  只有当滚动条滚动到特定的高度时,右边导航的楼层才会出现,如果滚动条滚动的高度小于这个

              临界值的时候,楼层是不会显示的。

 

  •  特效原理:

       1.  右边导航楼层一个div样式:position:fixed,这样滚动条在滚动的时候,右边楼层导航div位置始终不

            边。

       2.  在滚动条滚动的时候,先获得滚动条相对于整个网页顶部的高度大小top,如果top + 某个高

            度大于右边div的长度相对于整个网页顶部,右边导航楼层的样式发生变化。

  •    为了方便大家学习我把这个特效贴出来。

 

分享到:
评论

相关推荐

    一个类似阿里巴巴的js控制的导航栏.rar

    本资源“一个类似阿里巴巴的js控制的导航栏.rar”提供了一个使用JavaScript实现的导航栏示例,旨在模仿阿里巴巴网站的导航效果。在这个压缩包中,只有一个文件“一个类似阿里巴巴的js控制的导航栏”,这可能是HTML、...

    阿里巴巴-菜单

    其次,模仿阿里巴巴的原材料菜单,意味着我们要关注的是特定领域的商品分类。原材料菜单可能包括各种工业原料、化工产品、机械设备等,这些类目下的子菜单需要精细划分,以便用户精确搜索。例如,原材料菜单可能有...

    对阿里巴巴的分析以及未来市场预测

    阿里巴巴做为全球最大的B TO B网站,吸引了很多的竞争对手的模仿和关注,综观中国电子商务市场,其竞争非常激烈,平均每天有2个以上的电子商务网站推出,规模大小不一,良莠不齐,各有特色。根据公司战略,也计划...

    仿阿里巴巴PHP英文版b2b源码

    【标签】中的“仿阿里b2b”表明源码模仿了阿里巴巴B2B网站的部分设计和交互,可能是为了提供类似用户体验或作为学习参考。"php英文b2b"强调了这是基于PHP编程语言的B2B系统,适合英文市场。"php开源b2b"则进一步指出...

    阿里巴巴优势与劣势文.pdf

    6. **模式可模仿性**:阿里巴巴的中介模式容易被复制,加剧了市场竞争,增加了新对手的挑战。 7. **收费会员制度**:转型过程中的收费策略可能会导致部分会员流失,为竞争对手创造机会。 8. **平台复杂性**:庞大...

    模仿阿里云datav后台导航菜单特效.rar

    在“模仿阿里云DataV后台导航菜单特效.rar”中,我们很显然关注的是如何复现其后台导航菜单的效果。这个压缩包可能包含了一个名为“hjiaoben52”的文件或项目,它可能是代码、HTML/CSS/JavaScript文件或者是一个演示...

    高仿阿里巴巴,完整版

    【标题】"高仿阿里巴巴,完整版"所指的是一个项目,该项目旨在模仿阿里巴巴网站的界面设计、功能和用户体验,提供一个类似的在线平台。这可能是为了学习、研究或开发目的,帮助开发者了解大型电商平台的构建过程。 ...

    仿阿里巴巴的分类

    本项目旨在模仿阿里巴巴的分类功能,以提供类似的商品分类体验。通过分析“仿阿里巴巴的分类”这个项目,我们可以深入探讨如何实现这样的功能。 首先,我们看到标题提到“外层使用listview”,这表明项目采用了...

    仿阿里巴巴首页jQuery幻灯片切换代码.zip

    【描述】暗示了这是一个简单的特效实现,具体是模仿了阿里巴巴官方网站首页上的幻灯片切换功能。这种功能通常包含以下几个关键部分: 1. **jQuery库**:jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件...

    仿阿里巴巴黄色版2013版DT5

    【标题】"仿阿里巴巴黄色版2013版DT5" 指的是一个基于 Destoon 5(DT5)内容管理系统开发的模板,该模板的设计风格模仿了2013年时期的阿里巴巴网站,旨在为用户提供类似阿里巴巴的商务平台体验。这种模板特别适合...

    仿阿里巴巴商务通B2B

    在"仿阿里巴巴商务通B2B"项目中,我们可以理解为一个类似阿里巴巴的电子商务系统,旨在模仿其核心功能和用户体验,以便用户也能享受到便捷的B2B交易服务。下面将详细探讨该系统可能包含的关键技术点和功能模块。 1....

    aa.rar_阿里巴巴_高山流水mid

    【描述】"金桥外贸中心,本系统是模仿阿里巴巴会员功能制作" 提供了更深入的信息,表明这个系统或应用是一个仿照阿里巴巴平台对外贸易服务的功能构建的。"金桥外贸中心"可能是项目的名字,旨在为用户提供类似于阿里...

    仿阿里巴巴电子商务网站

    【标题】"仿阿里巴巴电子商务网站"的项目是一个基于JSP技术构建的B2B(Business to Business)在线交易平台,旨在模仿阿里巴巴网站的功能和用户体验。它为商家提供了一个平台,可以展示产品、寻找合作伙伴、进行在线...

    模仿啊里巴巴供求系统php程序

    描述中的“模仿阿里巴巴供求系统”意味着该程序旨在复制阿里巴巴网站的主要功能,如发布和查找商品、管理交易、用户注册与登录、搜索和筛选等功能。这通常涉及到以下几个关键知识点: 1. **用户认证与权限管理**:...

    仿阿里云导航条下拉菜单js特效

    本项目是针对阿里云导航条下拉菜单的JavaScript特效进行的仿制,旨在实现同样蓝色大气、美观的界面效果,并支持多级菜单的展开与收起。 首先,我们要理解这个特效的核心组成部分。`index.html`是整个页面的结构文件...

    仿阿里巴巴B2B电子商务系统_dotnet电子商务系统源代码.rar

    本文将深入探讨一个基于.NET技术栈开发的电子商务系统,该系统模仿了阿里巴巴B2B平台的核心功能和设计,为学习者和开发者提供了宝贵的参考资源。通过分析源代码,我们可以了解如何构建大型的B2B(Business-to-...

    精仿阿里巴巴源码 php

    【标题】"精仿阿里巴巴源码 php"是一个关于使用PHP编程语言开发的电子商务网站源码,旨在模仿阿里巴巴网站的功能和设计。这个项目可能是为了教学目的或个人实践,帮助开发者了解大型电商平台的架构和实现。 【描述...

    python + selenium +pyquery 爬虫 爬取 1688详情图片 阿里巴巴详情图片 与标题 下载图片并进行压缩 仅供学习交流使用 .zip

    在这个案例中,Selenium被用来打开1688网站,导航到商品详情页,以便获取图片和标题信息。Selenium需要一个WebDriver来控制浏览器,这里提供了不同平台下的ChromeDriver(chromedriver_linux64, chromedriver_mac_64...

Global site tag (gtag.js) - Google Analytics