`

Jquery DIV滚动至浏览器顶部位置固定

阅读更多

获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative。

 
方法一:
$(function() { 
    var elm = $('.nav'); 
    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' : ''); 
    }); 
}); 
 
方法二:

$(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"});
            }
        })
    })
 
 
 
 
.
分享到:
评论

相关推荐

    固定div,滚动到顶部固定

    // 获取div的初始顶部位置 $(window).scroll(function() { if ($(this).scrollTop() > topOffset) { // 当滚动位置超过div的初始位置 header.addClass("fixed"); // 添加一个类,比如fixed,将position设置为...

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

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

    jquery页面滚动顶部固定层代码.zip

    在网页设计中,让元素在页面滚动到一定位置时固定在顶部是一种常见的增强用户体验的技巧。这个名为"jquery页面滚动顶部固定层代码.zip"的压缩包包含了一个利用jQuery实现的这种效果的代码示例。jQuery是一款强大的...

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

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

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

    这种效果使得用户在滚动页面时,某个div元素(通常包含重要信息或导航)始终保持在视口顶部,提供持续的可见性。这种设计被称为“固定定位”(fixed positioning)或“粘性布局”(sticky layout)。 在HTML中,`...

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

    6. `if (st > parseInt(dv.attr('otop'))) {...}`: 如果滚动位置大于div的初始位置,将执行相应的CSS更改,将div固定在顶部。 7. 对于IE6,由于不支持`position: fixed`,代码使用`position: absolute`和`top`属性...

    Jquery跟随滚动条移动的div动画效果

    `scrollTop`变量获取当前滚动条在垂直方向上的位置,然后将这个值赋给div的`top`样式属性,使得div始终位于屏幕顶部。 为了防止div闪烁,我们需要确保它的定位方式是绝对定位(absolute)。在CSS中添加如下样式: ...

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

    `stop`事件处理器则在拖动结束时检查是否需要固定,如果未固定,则根据当前位置固定元素。 通过这种方式,我们可以创建一个既可拖动又可固定在屏幕任意位置的浮动DIV,提升用户的交互体验。当然,实际应用中可能还...

    jquery使用div实现滚动条效果

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

    6种效果jquery页面滚动div层固定插件hcsticky

    jQuery HCSticky插件通过监听页面滚动事件,动态调整div层的CSS属性,使其在特定条件下(如滚动到特定位置)变为固定定位。插件内置了多种动画效果,使得这一转换过程更加平滑自然。 **三、使用方法** 1. **引入...

    jQuery无限滚动加载图片瀑布流代码

    **jQuery无限滚动加载图片瀑布流代码详解** 在网页设计中,瀑布流布局(Masonry Layout)因其独特的展示方式,能够使页面元素排列得既美观又节省空间,特别适合用于图片展示类网站。jQuery无限滚动加载图片瀑布流...

    通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位

    在Web开发过程中,有时候我们需要...综上所述,通过JQuery控制div滚动条滚动到指定位置的技术并不复杂,但要实现一个健壮、用户友好且兼容多种浏览器的自动定位功能,开发者需要对相关技术细节进行充分的测试和优化。

    JS控制div跳转到指定的位置的几种解决方案总结

    scrollIntoView方法是一个较新的方法,它是DOM元素的属性之一,可以让浏览器滚动页面至该元素在视口内可见。 示例代码如下: ```javascript [].slice.call(document.querySelectorAll('a')).forEach(function(el){ ...

    DIV滚动悬浮层(滚动条动,层不动)

    在网页设计中,"DIV滚动悬浮层"是一种常见的交互效果,它使得某个元素(通常是一个包含重要信息或功能的div)在用户滚动页面时始终保持在屏幕的特定位置,提供持续的可视性和可访问性。这种效果可以用于侧边栏菜单、...

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

    在固定表头和列的问题上,jQuery 可以帮助我们监听滚动事件并动态调整元素的位置。 1. **固定表头(Fixed Header)**:表头固定的关键在于将 `thead` 元素从 `tbody` 中分离出来,并将其设置为绝对定位。当表格容器...

    div模块层随页面滚动遇顶固定的两种方法(js&jQuery)

    我一直以为是某个div或层随屏幕滚动,遇顶则固定,离开浏览器顶部又还原这样的例子其实不少,其实它的名字叫“层的智能浮动效果”。目前我们在国内的商业网站上就常常看到这样的效果了。例如淘宝网的搜索结果页的...

    jquery循环滚动插件

    **jQuery 循环滚动插件** 在Web开发中,经常需要实现各种动态效果来吸引用户注意力,其中一种常见效果就是循环滚动。jQuery作为一款强大的JavaScript库,提供了丰富的API和插件来实现这样的功能。本篇文章将详细...

    jQuery和css3页面顶部图片滚动缩小视觉差特效

    **jQuery和CSS3页面顶部图片滚动缩小视觉差特效详解** 在网页设计中,为了吸引用户的注意力和提升用户体验,视觉差效果被广泛应用。本教程将详细讲解如何利用jQuery和CSS3技术实现一种独特的“页面顶部图片滚动缩小...

    jQuery页面滚动左侧悬浮固定导航菜单代码.zip

    这个功能是通过监听页面滚动事件并计算导航菜单相对于浏览器顶部的距离来实现的。如果距离小于某个阈值,就将其设置为固定定位,否则恢复原始定位。 接下来,我们讨论一下HTML和JavaScript文件。"index.html" 是...

    jquery表头固定、列固定完美解决方案

    这个div元素会被定位在页面的固定位置,跟随用户的滚动,始终保持可见。这样,用户可以快速参考固定的列数据,无需不断滚动回来查找。 实现这个功能的关键在于准确计算和设置CSS样式,特别是position属性。插件需要...

Global site tag (gtag.js) - Google Analytics