一、遇顶固定的例子 我一直以为是某个div或层屏幕滚动,遇顶则固定,离开浏览器顶部又还原这样的例子其实不少,其实它的名字叫“层的智能浮动效果”。目前我们在国内的商业网站上就常常看到这样的效果了。例如淘宝网的搜索结果页的排序水平条,在默认状态时,该工具条是跟页面滚动的,如下图: 而当我们下拉滚动条,着页面向下滚动,当此工具条接触到浏览器的上边缘时,这时就会独立出来固定在顶部,不跟页面滚动而滚动了,如下图: 类似的例子效果我们在别的网站上都有看到过,例如腾讯微博首页上,当我们下拉屏幕浏览最新微博时,工具条也会出现这个效果,如下图: 这个效果看上去方便,贴心,也许还带推动广告的促销呢。原理其实很简单,本文展示两种方法。 二、智能浮动效果的实现原理 它分两种状态,一是默认状态,二是浮动固顶状态。 默认状态就是默认状态,什么也不用做,保持原有的CSS就好。无论有没有对它做定位,做了absolute也好,没做也好,都行。 关键是当浏览器屏幕滚动时,该对象div层要移除浏览器界面视区的时候,是要修改它的position属性,让它浮动在窗口的上沿显示就行了。最好的position属性是fixed,可以在IE6+和其他浏览器浮动层平滑的固定定位,由于IE6老大哥不支持fixed属性,所以可以另外赋予它absolute属性。当然也会产生副作用——滚动不平滑。不过也无所谓了,在微软公布不再修补更新XP漏洞,在中国360安全卫士的帮助下虽然大家仍然使用XP,但IE的用户已经是少之又少了。 那接下来,如何判断当前div层与浏览器窗口的上边缘接触了呢?遇到浏览器顶部了呢? 当浮动层div与浏览器窗口上边缘接触的一瞬间,其页面垂直偏移值与页面的滚动高度是一致的,所以我们就用这个进行判断。那如何获得页面上元素距离页面的垂直距离呢? 这里则是使用javaScript库实现。
2022-12-05 09:52:20 100KB div 遇顶固定 滚动
1
这个 m 文件首先创建了一个真实实验运动控制平台的线性状态空间模型,其中两个电动机用于围绕单个(垂直)轴旋转有效载荷。 这个简单的设备用于分析惯性稳定平台的控制方案。 更多细节可以在论文中找到 M. Rezac 和 Z. Hurak。 用于双级惯性稳定的结构化 MIMO H∞ 设计:HIFOO 和 Hinfstruct 求解器的案例研究。 Mechatronics, Elsevier, Vol.23, Iss.8, December, 2013, pp: 1084–1093。 DOI: http : //dx.doi.org/10.1016/j.mechatronics.2013.08.003 。 可绕垂直轴自由旋转的刚性板承载标准直流有刷式旋转电机,该电机通过皮带传动驱动带有直流音圈电机的次级级,从而推动有效载荷。 音圈电机的摩擦非常小,这是惯性稳定的一个非常合理的特性,但其角行程仅
2022-12-04 11:40:04 5KB matlab
1
C#开发实战1200例第2卷书代码,完整可编译,共23M!!! 只有23M,让你少下1个G!! 只有23M!!从CD 上直接拷贝下来有1个G,有些人上传的就是这么大! 那是因为编译好的exe也在其中,大部分人不需要exe,因为打开工程后 build一下就行了,没必要多下一个G东西。 至于只是需要exe的,请到另一个资源里去下载。
2022-11-30 10:00:56 23.14MB C# 开发实战 1200例 源码
1
Google Android应用案例开发大全(书光盘)【源码】第9章
2022-11-28 19:58:24 2.75MB android 案例 随书光盘 开发
1
《LINUX/UNIX系统编程手册》((德)Michael Kerrisk ),上下册,经典的LINUX/UNIX下C语言编程教材,这是这本书所用到的所有代码,包涵所有头文件,亲测在LINUX下完美运行
2022-11-27 01:23:10 230KB LINUX/UNIX
1
语言:中文 (简体) 商商城采集助手可支持淘宝、速卖通、1688、天猫、eBay等站点的产品采集,采集后可发布到商电商系统多商家的店铺中。 商商城采集助手,是一款能帮助商商家快速采集天猫、淘宝、1688等网站商品数据到商家商品库的实用工具。
2022-11-24 18:00:37 253KB 扩展程序
1
《Visual C++ OpenGL应用程序开发》书光盘内容,包括 1.运行程序效果图。保存在目录“\openGL\jpg\”下 2.例程的运行文件及附属文件:保存在目录“\openGL\exe\”下 3.例程的程序源代码:保存在目录“\openGL\program\”下
2022-11-23 23:28:21 14.41MB Visual C++ OpenGL 随书光盘
1
jQuery+css3实现页面滚动而旋转的logo图标特效源码.zip
2022-11-19 09:19:45 57KB jQuery