返回顶部的功能 div固定在页面位置不变

  1. 云栖社区>
  2. 博客列表>
  3. 正文

返回顶部的功能 div固定在页面位置不变

shy丶gril 2016-05-20 09:20:17 浏览881 评论0

摘要: 1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用呢?反正我用了感觉没啥用。

1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0;

但是这个在iframe满地跑的页面实际开发中,有啥用呢?反正我用了感觉没啥用。

2.还有一种就是JS控制了。我写的是随着滚动滚动 ,计算div的绝对与可视页面的位置不变。

复制代码
$(window.parent).on('scroll',function(){
   $(返回顶部所在div选择器).css('top',parent.document.documentElement.scrollTop+parent.document.body.scrollTop+'px'); 
})//这是在iframe框架中控制父body

$(window).on('scroll',function(){
   $(返回顶部所在div选择器).css('top',document.documentElement.scrollTop+document.body.scrollTop+'px'); 
})//这是在没有iframe框架中控制body
复制代码

3.这里有这两个东西:

parent.document.documentElement.scrollTop//IE 
parent.document.body.scrollTop//谷歌

这是为了考虑兼容性

转载:http://www.cnblogs.com/zqzjs/p/4621040.html

用云栖社区APP,舒服~

【云栖快讯】诚邀你用自己的技术能力来用心回答每一个问题,通过回答传承技术知识、经验、心得,问答专家期待你加入!  详情请点击

网友评论

shy丶gril
文章2082篇 | 关注205
关注
基于大数据的移动云服务。帮助App快速集成移动推送的功能,在实现高效、精确、实时的移动推送的... 查看详情
提供基于开源Elasticsearch及商业版X-pack插件,致力于数据分析、数据搜索等场... 查看详情
由轻量级Agent和云端组成,集云盾威胁情报于一体,通过Agent和云端大数据的联动,为您提... 查看详情
为您提供简单高效、处理能力可弹性伸缩的计算服务,帮助您快速构建更稳定、安全的应用,提升运维效... 查看详情
阿里云总监课正式启航

阿里云总监课正式启航