jQuery实现浮动层跟随页面滚动效果

#main{height:2000px}

.demo{width:180px; height:250px; margin:10px; border:2px solid #ccc; background:#eee; padding:10px; }

#demo1{position:relative; margin-top:-290px;}

#demo2{position:absolute; margin-top:156px; right:10px;}

.demo a{text-decoration:underline; cursor:pointer}

.demo h3{font-size:14px}

.demo p{line-height:20px}

$(function(){

$("#demo1").scrollFollow({

offset: 156

});

$("#demo2").scrollFollow({

speed:1000,

//offset: 156,

//relativeTo:"bottom",

killSwitch: "switchlink",

onText: '取消滚动',

offText: '开启滚动'

});

Demo 1

滚动鼠标滚轮或者拖动浏览器的滚动条看看。

Demo 2

你可以通过点击下面的链接来开启和关闭浮动层的跟随滚动效果。

启动开关

helloweba

jQuery实现浮动层跟随页面滚动效果

html右侧浮动栏随着滚动,jQuery实现div浮动层跟随页面滚动效果相关推荐

jQuery实现浮动层跟随页面滚动效果
在本例中,我用到了一个重要的插件:scroll-follow,该插件在当前主流浏览器IE6+, FF2+, Safari 3,and Opera 9均测试通过,具有可配置参数,使用简单的特点. XHT ...
如何设置页脚跟随页面滚动高度不够时固定在底部
在开发PC页面的时候我们经常遇到底部栏要自适应页面,页面内容少的时候要固定在底部,内容超出的时候要跟随页面滚动.这里介绍一个比较容易的方法只需设置页面内容最小高度min-height比如min-he ...
蒙层禁止页面滚动的方案
蒙层禁止页面滚动的方案弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互.但是在蒙层出现的时候滚动页面,如果不加处理,蒙层底部的页面会开始滚动,实际上我 ...
# 解决微信小程序遮罩层底部页面滚动
解决微信小程序遮罩层底部页面滚动一.wxml文件添加catchtouchmove="move". <view class="" class=" ...
jq锚点定位平滑跳转和导航跟随页面滚动并定位到相应位置，导航高亮显示
在做项目的过程中碰到的问题,一开始还很顺利,在编写父子导航时出现了问题,经过研究,终于解决. 关于锚点定位,我们通常都是a标签写上#id名字,然后在目标上写上id名字.然而我采用的不是这种,而且利用自 ...
JQuery 在DIV中加载页面
JQuery 在DIV中加载页面在做页面设计的时候,有时需要在一个页面上引入另一个页面,用jquery比较简单 index.html <!DOCTYPE html PUBLIC "- ...
微信小程序使用echarts不跟随页面滚动的问题
[ 问题描述 ]在小程序使用echarts,图表展示出来之后不跟随页面滚动,浮在最上方. [ 问题原因 ]布局中含有position:fixed或absulote的元素,导致echarts图表无法滑动 ...
html侧边导航栏跟随页面滚动,页面滚动时，右侧导航栏跟着对应滚动
页面滚动时,右侧导航栏跟着对应滚动方法一: 导航栏对应跳转 *{ margin:0px; padding:0px; text-align:center; color:#fff; font-size: ...
移动端弹出遮罩层禁止页面滚动，遮罩里面的框允许滚动如何实现。
因为有的弹窗上面有滑动,但是滑动部分滑动时会带动底下的页面滚动,如何解决? 1.弹窗弹起时 activityAgreement:function(){vm.agreementsDailog=true; ...

html右侧浮动栏随着滚动,jQuery实现div浮动层跟随页面滚动效果

Demo 1

Demo 2

helloweba

jQuery实现浮动层跟随页面滚动效果

html右侧浮动栏随着滚动,jQuery实现div浮动层跟随页面滚动效果相关推荐

最新文章

热门文章