今天在逛人人网时,发现人人网首页左侧的“应用动态”,随着我页面向下滚动,一直固定在网站的左侧。但这效果存在一点瑕疵,在拖动过程中存在一点抖动(ie下),不是非常平滑。我尝试使用jquey实现了该效果,也解决了抖动的问题。现在把它拿出来和大家分享一下。
人人网效果:
思路:
- 创建一个ID为sideBar的div,将它的position设置为absolute。
- 当页面滚动条的垂直高度超过sideBar的top时,就将它的position设置为fixed。
- 当页面滚动条的垂直高度小于sideBar的top时,将它的position重新设置为 absolute。
- sideBar要跟网页顶部保持一定距离,所以我们将sideBar的css里设置 “margin-top”(这就是发生抖动的原因)。
Ie6问题:
Ie6不支持fixed属性,所以这效果需要过滤IE6
//判断是否为IE6 var msie6 = $.browser == 'msie' && $.browser.version < 7; //浏览器不为ie6 if (!msie6) { //效果代码 }
Css编写:
*{ margin: 0px; padding: 0px; } body{ text-align: center; } #wrapper{ height: 2000px; position: relative; } #sideBar{ width: 100px; height: 300px; position: absolute; top: 0px; left: 100px; background: #999; margin-top: 20px;/*与顶部的距离*/ } /*不要写成.fixed ,sideBar 已经设置了position为absolute,.fixed与sideBar原有css属性同级别的,将无法覆盖原有属性。而sideBar.fixed选择的优先级别较高*/ #sideBar.fixed{ position: fixed; top: 0px; } #content{ padding-left: 300px; padding-top: 200px; } #sideWrapper{ position: absolute; width:280px; top: 100px; }
防止抖动:
动态应用与网页顶部的高度为sideBar.offset().top
为了避免抖动,我们应该在动应用距离网页窗口还有动态应用设定的magintop
的距离时,将动态应该的position 设置为fixed.
$sideBar.offset().top- parseFloat($sideBar.css("marginTop")
完整的jquery代码:
$(function() { var $sideBar = $("#sideBar"); //左侧栏与顶部的高度 var top = $sideBar.offset().top - parseFloat($sideBar.css("marginTop").replace(/auto/,0)); var msie6 = $.browser == 'msie' && $.browser.version < 7; if (!msie6) { $(window).scroll( //页面滚动条滚动式触发效果 function() { var scrollTop = $(this).scrollTop();//拖动的高度 if(scrollTop > top) { $sideBar.addClass("fixed"); }else{ $sideBar.removeClass("fixed"); } }); } });
代码下载地址:https://github.com/yeahzan/fixed.git
原文地址:http://www.yeahzan.com/blog/item/fixed.html
相关推荐
在提供的压缩包文件 "iframe中fixed失效问题" 中,可能包含了具体的代码示例或演示页面,你可以直接打开查看这些案例,以更好地理解和应用上述解决方案。实际操作时,需要根据具体项目需求和限制选择合适的方法,...
固定参数算法(Fixed-Parameter Algorithms)是一种理论计算机科学领域内的研究方向,旨在处理那些在经典复杂性理论中被认为是难解的问题。这些问题通常被归类为NP完全问题,这意味着它们很难找到高效算法来解决。...
这个项目的扩展`bootstrap-table-fixed-columns`专注于解决在大表格中固定首列或首行的问题,使得在滚动时这些重要列始终保持可见,提高用户在浏览长表格时的可读性和交互性。在网页设计中,尤其是在数据密集型应用...
在网页设计和开发中,"fixed-columns"是一个常见的概念,特别是在处理数据密集型的应用场景,如数据表或者报表展示。这个特性允许用户在滚动浏览长表格时,将某些列(通常是列头)固定在屏幕的一侧,使得这些关键...
"fixed-cam"则表明该模型是基于固定摄像头视角的,即摄像头位置和角度保持不变,这在很多监控系统或直播应用中非常常见。 背景消隐(Background Matting)是一种复杂的图像处理技术,它的目标是从图像中分离前景...
在互联网的早期,Internet Explorer 6 (IE6) 是广泛使用的浏览器之一,但它存在许多兼容性和...通过学习和应用这些技巧,开发者可以提升网站在老旧浏览器中的用户体验,确保更广泛的用户群体能够顺利访问和使用网站。
总的来说,这个"fixed-sticky.zip"项目是一个关于前端布局技术的实例,可以帮助开发者学习和理解如何在网页中有效地应用固定定位和粘性定位,提升用户体验。通过深入研究项目代码,可以学习到如何在不同场景下选择和...
"Fixed Columns"功能是Bootstrap Table的一个扩展,它允许用户在表格中固定左侧或右侧的列,即使在滚动时,这些列也会始终保持可见,提高了数据浏览的便利性。这对于那些需要大量数据展示并且需要快速访问特定列信息...
### OpenGL Fixed Function Pipeline #### 简介 OpenGL(Open Graphics Library)是一种用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口(API)。它由Khronos Group维护,并且提供了丰富的命令参考文档...
在实际应用中,你需要将这个插件集成到 FastAdmin 的项目中,通常包括以下几个步骤: 1. 解压 `bootstrap-table-fixed-columns.zip` 文件,获取其中的 JavaScript 和 CSS 文件。 2. 将这些文件上传到 FastAdmin 的...
本书《Invitation to Fixed-Parameter Algorithms》由Rolf Niedermeier撰写,主要讨论的是参数化算法及其计算复杂性,这是计算机科学中的一个重要分支,特别是在处理组合问题的复杂性方面。参数化算法专注于为特定...
这份文档详细介绍了ARM架构中固定功能硬件(Functional Fixed Hardware,FFH)的技术细节和规范,为系统软件在ARM平台上的开发和应用提供了基础的技术支持和规范要求。 标题“ARM Functional Fixed Hardware ...
2. 然后,选择要应用固定定位的元素,可以使用jQuery的选择器,例如:`$("#myElement")`。 3. 调用插件的方法,例如`$("#myElement").fixed()`. 这将使选中的元素变为固定定位。 4. 可能需要根据项目需求进行一些...
标题 "E_FIXED_LC/D_LC" 涉及的是数字水印和隐写术系统中的特定技术,这里主要讨论的是“固定长度编码(E_FIXED_LC...通过深入研究提供的文件,我们可以更全面地了解这种技术的工作原理、优势以及在实际应用中的表现。
总的来说,`bootstrap-table-fixed-columns.js`是Bootstrap Table的一个强大插件,能够帮助你在Web应用中创建具有固定列的表格,提高用户体验。理解其工作原理和配置选项,可以帮助你更好地利用这个工具来满足各种...
### UTF-16BE_FIXED.txt 文件解析 #### 标题:UTF-16BE_FIXED.txt **UTF-16BE**是一种字符编码方式,其中**BE**代表**Big Endian**(大端模式)。该文件名为**UTF-16BE_FIXED.txt**,表明这是一个采用UTF-16BE编码...
在iOS设备上,由于Safari浏览器的特殊渲染机制,经常会出现`fixed`定位失效的问题,尤其是在使用`Vue.js`框架构建的web应用中。这个问题主要表现为`fixed`元素不再固定于屏幕某个位置,而是随页面滚动而移动。针对这...
《CC430在433MHz无线通信中的应用与Fixed_LT_FIFO实现详解》 在无线通信领域,CC430芯片因其集成了微控制器和射频(RF)功能而备受青睐,尤其适用于低功耗的无线传感器网络。标题中的"Fixed_LT_FIFO.rar_cc430_fixed...
理解`GMEM_FIXED`和`GMEM_MOVABLE`的区别对于编写高效、可靠的Windows应用程序至关重要。`GMEM_FIXED`提供了稳定的内存地址,但牺牲了部分灵活性;而`GMEM_MOVABLE`允许系统优化内存布局,但需要考虑指针更新的问题...
标题中的"clk-tegra-fixed.rar_fixed"暗示了这是一个修复过的版本,主要针对Tegra平台的时钟管理。Tegra是NVIDIA公司推出的一系列系统级芯片(SoC),广泛应用于移动设备和嵌入式系统中。修复通常意味着解决了之前...