获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative。
效果如下:
示例代码例1:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function() { var elm = $('#pordAttr'); var startPos = $(elm).offset().top; $.event.add(window, "scroll", function() { var p = $(window).scrollTop(); $(elm).css('position',((p) > startPos) ? 'fixed' : 'static'); $(elm).css('top',((p) > startPos) ? '0px' : ''); }); }); </script>
示例代码例2:
•$(function(){ •//获取要定位元素距离浏览器顶部的距离 •var navH = $(".nav").offset().top; •//滚动条事件 •$(window).scroll(function(){ •//获取滚动条的滑动距离 •var scroH = $(this).scrollTop(); •//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定 •if(scroH>=navH){ •$(".nav").css({"position":"fixed","top":0}); •}else if(scroH<navH){ •$(".nav").css({"position":"static"}); •} •}) •})
这种只要超过我们固定的位置我们就可以随便用户滚动而滚动了。
相关推荐
标题中的“jquery控制滚动条下拉后DIV容器在页面中的位置”是指利用jQuery库来实现一个功能,即在用户滚动网页时,使指定的DIV元素始终保持在屏幕的某个固定位置,这种效果通常被称为“粘性导航”或“固定定位”。...
除了基本的滚动事件监听,jQuery还提供了许多相关的函数,如`.scrollTop()`用于获取或设置元素的顶部滚动位置,`.scrollLeft()`用于处理水平方向的滚动。这些函数可以与动画方法`.animate()`结合,实现平滑滚动效果...
标题中的“div当滚动到页面顶部的时候固定在顶部实例代码”描述了一个常见的网页设计技术,通常被称为“固定顶栏”或“固定导航”。这个技术使得网页的某个部分(在这个例子中是一个包含链接的div)在用户滚动页面时...
这款基于jQuery的插件允许开发者实现div元素在页面滚动时保持在特定位置的效果,如固定侧边栏、顶部导航或者浮动按钮。这种布局方式能够确保关键信息始终可见,提高用户交互性。 首先,我们要理解jQuery库。jQuery...
不过,现代浏览器已经原生支持滚动事件,因此在不需要额外功能的情况下,使用纯JavaScript处理也是完全可行的。 总的来说,实现网页局部div随滚动条置顶滚动涉及HTML结构、CSS样式以及(可选的)JavaScript或jQuery...
本主题将深入探讨如何使用jQuery实现一个可拖动并可固定在页面上的浮动DIV元素。 首先,让我们理解“浮动DIV”。在HTML中,浮动(float)属性常用于布局,使元素可以向左或向右移动,以便其他内容可以环绕它。在CSS...
当表格容器(通常是一个 `div`)滚动时,表头始终保持在视口顶部。可以使用以下代码实现: ```javascript $(window).scroll(function() { var scrollTop = $(this).scrollTop(); $('#tableId thead').css({ '...
在网页设计中,"div不随滚动条的滚动而动"是一种常见的布局需求,通常用于创建固定定位元素,如顶部导航栏、侧边栏或浮动提示框等。这些元素需要在用户滚动页面时始终保持在屏幕的某个特定位置,提供持续的可访问性...
在提供的示例代码中,开发者使用了一个条件语句来检查滚动条距离顶部的距离是否大于200像素。这是一个常见的阈值,用于决定何时显示或隐藏某些元素,比如返回顶部的按钮。当`$(window).scrollTop() >= 200`时,`....
"jQuery文字上下无缝滚动"是一种常见的网页动态效果,它可以使文字或内容在页面上持续滚动,给予用户流畅且不间断的阅读体验。这种效果常用于新闻更新、公告栏或广告展示等场景。 jQuery是一个强大的JavaScript库,...
在网页设计中,"DIV无缝滚动"是一种常见的视觉效果,用于展示内容时创造连续、平滑的滚动体验。这种效果通常结合HTML的`<div>`元素、JavaScript(JS)和jQuery库来实现,使得信息或者图片能够像一个无限循环的列表...
"底部固定悬浮工具栏jQuery代码兼容ie6+主流浏览器"这个资源提供了这样一个功能的实现,适用于多种浏览器环境,包括Internet Explorer 6到9以及Chrome和Firefox。 jQuery是一款广泛使用的JavaScript库,简化了...
jQuery实现滚动条下拉时DIV固定在页面头部的效果,是一种常见的前端交互设计,多用于页面导航或重要信息提示栏。通过这个功能,可以确保用户在滚动页面时,某些特定的内容始终可见,从而提升用户体验。 实现该效果...
3. **兼容性检查**:虽然大部分现代浏览器都支持jQuery和CSS固定定位,但应确保在不支持的浏览器中提供降级方案。 总结,使用jQuery实现跟随滚动条的漂浮层效果,主要涉及CSS固定定位、jQuery的事件监听和DOM操作。...
当用户滚动浏览器窗口时,通过设置的滚动监听函数,jQuery能够捕获到滚动事件,并执行其中的代码。这主要通过$(window).scroll()方法实现,该方法接受一个函数作为参数,该函数在窗口滚动时被调用。 具体到实现DIV...
在“jQuery点击锚点链接屏幕滚动代码.zip”这个压缩包中,包含的是一段实现页面内锚点链接点击后平滑滚动到对应位置的jQuery代码。这种功能在网站设计中常见于导航菜单或页面目录,它能提供良好的用户体验,使用户...
jQuery网页锚点定位平滑滚动导航菜单代码是一个实用的网页交互功能,它使得用户在点击导航菜单时,页面能够平滑地滚动到相应的目标位置,而不是瞬间跳转,从而提高用户体验。这个压缩包包含了实现这一功能所需的基本...
在网页设计中,固定div(固定定位)是一种常见的布局技巧,它使得div元素在页面滚动时仍然保持在屏幕的特定位置,例如顶部导航、侧边栏等。本示例将探讨两种实现页面固定div位置的方法,并进行比较。 方法一:CSS ...
当导航栏底部到达浏览器视口顶部时,将其固定在顶部;反之,当导航栏顶部离开视口时,恢复其原始位置。以下是一个基本的实现: ```javascript $(document).ready(function() { var $nav = $('#sidebar-nav'); var...
对于不支持fixed的浏览器,则直接将广告顶部位置设置为滚动条当前位置。 - 当滚动条向上滚动时,广告元素将恢复原来的位置属性。 3. 示例代码: ```javascript $.fn.smartFloat = function() { var position = ...