楼层滚动jquery源代码（jquery上下滚动）

今天给各位分享楼层滚动jquery源代码的知识，其中也会对jquery上下滚动进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、jquery 拖动滚动条时悬浮条跟随滚动代码求网友指点
• 2、用jquery来设置网页导航栏向下滚动时隐藏，向上滚动时显示的代码
• 3、jQuery实现将div中滚动条滚动到指定位置的方法

jquery 拖动滚动条时悬浮条跟随滚动代码求网友指点

给你个思路吧：

offset().top 悬浮窗在页面没滚动的时候与页面顶部的距离，这个距离只取了一次所以这个距离从开始就始终没变。

$(window).scrollTop() 是页面已经滚动的距离（是跟随你滚动不断变动的），就是你滚动条往下滚动的距离（页面可是区域顶端与原页面真实顶端的距离）

当页面滚动的时候触发函数$(window).scroll

然而悬浮窗又要保持页面打开时候的位置，那显然就是

悬浮窗原始与顶部距离+页面已经滚动过的距离；

用jquery来设置网页导航栏向下滚动时隐藏，向上滚动时显示的代码

script type="text/javascript" src=""/script

script

    (function() {

    new Headroom(document.querySelector("#nav-scroll"), { //这里的nav-scroll改为你的导航栏的id或class

        offset : 5, // 在元素没有固定之前，垂直方向的偏移量（以px为单位）

            tolerance: 5, // scroll tolerance in px before state changes        

        classes: {

            initial: "animated",  // 当元素初始化后所设置的class

            pinned: "slideUp", // 向上滚动时设置的class

            unpinned: "slideDown" // 向下滚动时所设置的class

        }

    }).init();    

    }());

/script

然后，加上样式就可以了：

.animated {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}

.animated .slideDown {top: -100px;}

.animated .slideUp {top: 0;}

jQuery实现将div中滚动条滚动到指定位置的方法

本文实例讲述了jQuery实现将div中滚动条滚动到指定位置的方法。分享给大家供大家参考，具体如下：

一、Js代码：

onload

=

function

()

{

//初始化

scrollToLocation();

};

function

scrollToLocation()

{

var

mainContainer

=

$('#thisMainPanel'),

scrollToContainer

=

mainContainer.find('.son-panel:last');//滚动到div

id="thisMainPanel"中类名为son-panel的最后一个div处

//scrollToContainer

=

mainContainer.find('.son-panel:eq(5)');//滚动到div

id="thisMainPanel"中类名为son-panel的第六个处

//非动画效果

//mainContainer.scrollTop(

//

scrollToContainer.offset().top

-

mainContainer.offset().top

+

mainContainer.scrollTop()

//);

//动画效果

mainContainer.animate({

scrollTop:

scrollToContainer.offset().top

-

mainContainer.offset().top

+

mainContainer.scrollTop()

},

2000);//2秒滑动到指定位置

}

二、Html代码：

div

id="thisMainPanel"

style="height:200px;overflow-y:

scroll;border:1px

solid

#f3f3f3;"

div

class="son-panel"我是类容区域-1/div

div

class="son-panel"我是类容区域-2/div

div

class="son-panel"我是类容区域-3/div

div

class="son-panel"我是类容区域-4/div

div

class="son-panel"

style="height:160px;"我是类容区域-5/div

div

class="son-panel"我是类容区域-6/div

div

class="son-panel"我是类容区域-7/div

div

class="son-panel"我是类容区域-8/div

/div

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》、《jQuery

form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

楼层滚动jquery源代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于jquery上下滚动、楼层滚动jquery源代码的信息别忘了在本站进行查找喔。