文档章节

顶部浮动代码

陈映亮
 陈映亮
发布于 2015/06/29 17:34
字数 53
阅读 114
收藏 9
<script type="text/javascript">
  var margintop = $("#header").offset().top

  //var marginleft = $("#header_cont").offset().left;
 //alert(margintop)
 //alert(marginleft)
 
   $(window).scroll(function() {
     var scrtop = $(document).scrollTop();
     if(scrtop<margintop){
      $('#header').css({
          position: 'absolute',
          top: margintop,
          left:'0'
        });

      return false;
    }
        $('#header').css({
          position: 'absolute',
          top: scrtop,
          left:'0'
        });
    });
</script>


© 著作权归作者所有

陈映亮
粉丝 10
博文 130
码字总数 38454
作品 0
深圳
程序员
私信 提问
加载中

评论(4)

甩葱哥
甩葱哥
另外你这段程序肯定是插在文档结尾的,非常古老的技术了。jquery都有document ready可以用,总体来说思路和风格还有待优化。
甩葱哥
甩葱哥
不就是要求根据滚动高度停留在屏幕的不同位置么。最好先定义这两个状态的css,然后用class操作。滚动事件是每一像素触发一次的。按照这种风格继续编码以后代码非常不好维护。
陈映亮
陈映亮 博主

引用来自“甩葱哥”的评论

直接fixed不就完了
谢谢,应用场景不一样。
甩葱哥
甩葱哥
直接fixed不就完了
高仿美团app,浮动layout滑动到顶部悬停效果

做了个类似美团app的一个效果 当一个浮动layout的滑动到顶部时,这个浮动layout就悬停下来,当屏幕往下滑动时,浮动layout也跟着往下移动。 因此,我特意也写了一个:浮动layuot滑动到顶部悬...

谁带我去看看世界
2015/06/16
0
4
【Android】商品详情页实现

我告诉自己,要独立,要坚强,要勇敢,要活的漂亮,要让自己永远善良。 现今的市场说O2O模式很火一点都不假,例如电商,各行各业都在做电商。而做电商平台必不可少的是商品详情页,那么如何实...

zrunker
2017/10/25
0
0
CSS浮动(float,clear)通俗讲解

很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程。 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家 写在前面的话: 由于C...

桐桐ESC
2013/03/29
0
6
Android5.0+(CoordinatorLayout)

英文原文:https://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout 这篇文章专门讲解和CoordinatorLayout相关的知识点,这也是Design Support Library中最重要与最难...

让代码飞一会
2015/07/28
0
0
CSS深入理解:overflow:hidden——溢出,坍塌,清除浮动

overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌。当某一个属性拥有这么多的功能时,难免使人难以把握,不过不要怕,只要信:看完这篇文章...

lakey0126
2018/08/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

数据库管理哪家强?Devart VS Navicat 360°全方位对比解析

今天小编向大家推荐的是两个开发环节的主流数据库管理品牌,那么你知道这两款数据库管理软件品牌与 数据库引擎配套的管理软件有什么区别吗?小编这就360°全方位为您解答: ★ 品牌介绍 Deva...

FILA6666
6分钟前
0
0
Leetcode PHP题解--D107 453. Minimum Moves to Equal Array Elements

D107 453. Minimum Moves to Equal Array Elements 题目链接 453. Minimum Moves to Equal Array Elements 题目分析 给定一个数组,对数组中的N-1个数组每次加1,返回最少需要多少步才能使得...

skys215
8分钟前
0
0
Spring注解——同一接口有多个实现类,如何注入

https://blog.csdn.net/u010476994/article/details/80986435

Java搬砖工程师
12分钟前
0
0
java高并发(二)并发与高并发基本概念

并发 同时拥有两个或者多个线程,如果程序在单核处理器上运行,多个线程将交替地换入或者换出内存,这些线程是同时“存在”的,每个线程都处于执行过程中的某个状态,如果运行在多核处理器上...

Vincent-Duan
16分钟前
1
0
Fundebug:JavaScript插件支持错误采样

Fundebug的付费套餐主要是根据错误事件数制定的,这是因为每一个发送到我们服务器的事件,都会消耗一定的CPU、内存、磁盘以及带宽资源,尤其当错误事件数非常大时,会对我们的计算资源造成很...

Fundebug
16分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部