`

Jquery DIV滚动至浏览器顶部后固定不动代码

 
阅读更多

获取元素(这里定位元素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"});
•}
•})
•})

 这种只要超过我们固定的位置我们就可以随便用户滚动而滚动了。

 

  • 大小: 63.9 KB
分享到:
评论

相关推荐

    jquery控制滚动条下拉后DIV容器在页面中的位置

    标题中的“jquery控制滚动条下拉后DIV容器在页面中的位置”是指利用jQuery库来实现一个功能,即在用户滚动网页时,使指定的DIV元素始终保持在屏幕的某个固定位置,这种效果通常被称为“粘性导航”或“固定定位”。...

    jquery使用div实现滚动条效果

    除了基本的滚动事件监听,jQuery还提供了许多相关的函数,如`.scrollTop()`用于获取或设置元素的顶部滚动位置,`.scrollLeft()`用于处理水平方向的滚动。这些函数可以与动画方法`.animate()`结合,实现平滑滚动效果...

    div当滚动到页面顶部的时候固定在顶部实例代码

    标题中的“div当滚动到页面顶部的时候固定在顶部实例代码”描述了一个常见的网页设计技术,通常被称为“固定顶栏”或“固定导航”。这个技术使得网页的某个部分(在这个例子中是一个包含链接的div)在用户滚动页面时...

    jQuery超强div固定位置布局特效插件

    这款基于jQuery的插件允许开发者实现div元素在页面滚动时保持在特定位置的效果,如固定侧边栏、顶部导航或者浮动按钮。这种布局方式能够确保关键信息始终可见,提高用户交互性。 首先,我们要理解jQuery库。jQuery...

    网页局部div随滚动条置顶滚动

    不过,现代浏览器已经原生支持滚动事件,因此在不需要额外功能的情况下,使用纯JavaScript处理也是完全可行的。 总的来说,实现网页局部div随滚动条置顶滚动涉及HTML结构、CSS样式以及(可选的)JavaScript或jQuery...

    jquery 可拖动浮动DIV ,可固定DIV

    本主题将深入探讨如何使用jQuery实现一个可拖动并可固定在页面上的浮动DIV元素。 首先,让我们理解“浮动DIV”。在HTML中,浮动(float)属性常用于布局,使元素可以向左或向右移动,以便其他内容可以环绕它。在CSS...

    Jquery table固定表头,固定列,全浏览器兼容

    当表格容器(通常是一个 `div`)滚动时,表头始终保持在视口顶部。可以使用以下代码实现: ```javascript $(window).scroll(function() { var scrollTop = $(this).scrollTop(); $('#tableId thead').css({ '...

    div不随滚动条的滚动而动 可以兼容到IE6

    在网页设计中,"div不随滚动条的滚动而动"是一种常见的布局需求,通常用于创建固定定位元素,如顶部导航栏、侧边栏或浮动提示框等。这些元素需要在用户滚动页面时始终保持在屏幕的某个特定位置,提供持续的可访问性...

    jquery判断滚动条距离顶部的距离方法

    在提供的示例代码中,开发者使用了一个条件语句来检查滚动条距离顶部的距离是否大于200像素。这是一个常见的阈值,用于决定何时显示或隐藏某些元素,比如返回顶部的按钮。当`$(window).scrollTop() &gt;= 200`时,`....

    jquery文字上下无缝滚动

    "jQuery文字上下无缝滚动"是一种常见的网页动态效果,它可以使文字或内容在页面上持续滚动,给予用户流畅且不间断的阅读体验。这种效果常用于新闻更新、公告栏或广告展示等场景。 jQuery是一个强大的JavaScript库,...

    DIV无缝滚动

    在网页设计中,"DIV无缝滚动"是一种常见的视觉效果,用于展示内容时创造连续、平滑的滚动体验。这种效果通常结合HTML的`&lt;div&gt;`元素、JavaScript(JS)和jQuery库来实现,使得信息或者图片能够像一个无限循环的列表...

    底部固定悬浮工具栏jQuery代码兼容ie6+主流浏览器

    "底部固定悬浮工具栏jQuery代码兼容ie6+主流浏览器"这个资源提供了这样一个功能的实现,适用于多种浏览器环境,包括Internet Explorer 6到9以及Chrome和Firefox。 jQuery是一款广泛使用的JavaScript库,简化了...

    jquery简单实现滚动条下拉DIV固定在头部不动

    jQuery实现滚动条下拉时DIV固定在页面头部的效果,是一种常见的前端交互设计,多用于页面导航或重要信息提示栏。通过这个功能,可以确保用户在滚动页面时,某些特定的内容始终可见,从而提升用户体验。 实现该效果...

    Jquery 跟随滚动条漂浮层

    3. **兼容性检查**:虽然大部分现代浏览器都支持jQuery和CSS固定定位,但应确保在不支持的浏览器中提供降级方案。 总结,使用jQuery实现跟随滚动条的漂浮层效果,主要涉及CSS固定定位、jQuery的事件监听和DOM操作。...

    基于jquery的DIV随滚动条滚动而滚动的代码

    当用户滚动浏览器窗口时,通过设置的滚动监听函数,jQuery能够捕获到滚动事件,并执行其中的代码。这主要通过$(window).scroll()方法实现,该方法接受一个函数作为参数,该函数在窗口滚动时被调用。 具体到实现DIV...

    jQuery点击锚点链接屏幕滚动代码.zip

    在“jQuery点击锚点链接屏幕滚动代码.zip”这个压缩包中,包含的是一段实现页面内锚点链接点击后平滑滚动到对应位置的jQuery代码。这种功能在网站设计中常见于导航菜单或页面目录,它能提供良好的用户体验,使用户...

    jQuery网页锚点定位平滑滚动导航菜单代码.zip

    jQuery网页锚点定位平滑滚动导航菜单代码是一个实用的网页交互功能,它使得用户在点击导航菜单时,页面能够平滑地滚动到相应的目标位置,而不是瞬间跳转,从而提高用户体验。这个压缩包包含了实现这一功能所需的基本...

    在页面固定div位置实示例

    在网页设计中,固定div(固定定位)是一种常见的布局技巧,它使得div元素在页面滚动时仍然保持在屏幕的特定位置,例如顶部导航、侧边栏等。本示例将探讨两种实现页面固定div位置的方法,并进行比较。 方法一:CSS ...

    jQuery侧边固定悬浮导航

    当导航栏底部到达浏览器视口顶部时,将其固定在顶部;反之,当导航栏顶部离开视口时,恢复其原始位置。以下是一个基本的实现: ```javascript $(document).ready(function() { var $nav = $('#sidebar-nav'); var...

    jQuery网页右侧广告跟随滚动代码分享

    对于不支持fixed的浏览器,则直接将广告顶部位置设置为滚动条当前位置。 - 当滚动条向上滚动时,广告元素将恢复原来的位置属性。 3. 示例代码: ```javascript $.fn.smartFloat = function() { var position = ...

Global site tag (gtag.js) - Google Analytics