示例：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

    <title>test page</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="css/main.css" />

    <script src="./jquery.js"></script>

</head>

<body>

<div class="top"></div>

<div class="wrap">

    <div class="tip">浮起来吧</div>

    <div class="xia">mmmmmmmmmmmmmmmmmmbbbbbbbbbbbbbbbbbbbbbbb</div>

        1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>

        1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>

        1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>

        1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>

</div>

<script type="text/javascript">

    $(function(){

        var stiptop = $(".tip").position().top;

        var sNum = 210;

        $(window).scroll(function(){

            var sTop = parseInt($(window).scrollTop());

            if(sTop > 210){

                 $(".tip").css({'position':'fixed','marginTop':'0px'});

            }

            else{

                $(".tip").css({'position':'static','marginTop':'10px'});

            }

        });

    });

</script>

</body>

</html>

jquery实现顶部浮动效果的更多相关文章

  1. Jquery广告浮动效果小案例

    导入<script src="<%=path%>/html5/js/jquery.js"></script>文件 <SCRIPT type ...

  2. jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6

    http://www.cnblogs.com/lhj588/archive/2013/04/02/2994639.html —————————————————————————————————————— ...

  3. jquery实现章节目录效果

    <html><head><title>jquery实现章节目录效果</title> <script type="text/javascr ...

  4. 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果

    元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...

  5. jQuery网站顶部定时折叠广告

    效果体验:http://hovertree.com/texiao/jquery/4.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...

  6. jquery返回顶部，支持手机

    jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...

  7. 用jQuery实现瀑布流效果学习笔记

    jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...

  8. jQuery防京东浮动网站楼层导航代码

    jQuery防京东浮动网站楼层导航代码   <!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml" ...

  9. 分享21个基于jquery菜单导航的效果

    jquery导航菜单插件制作jquery动画菜单熔岩灯菜单效果更新时间:02月15日 14:53:03 虾米精选-菜单导航-导航菜单 0浏览 / ★★★☆☆星级 / 未知软件大小/ jquery导航菜 ...

随机推荐

  1. docker容器启动时执行脚本 run /bin/bash执行多条指令

    搜了很多资料发现并未解决,以下方法失败!求大神评论给出完美方案 1.首先需要编写需要启动的脚本,并将脚本放在 /etc/init.d/目录下 如:cs.sh 2.修改权限 3.chkconfig -- ...

  2. git的问题（error: object file .git/objects/* is empty...）的解决方案及对git版本库文件的了解

    由于操作不当,导致git版本库出了大问题,如下所示: error: object file .git/objects/8b/61d0135d3195966b443f6c73fb68466264c68e ...

  3. Effective C++ .12 复制对象-拷贝构造函数的编写

    当我们自己编写拷贝构造函数时,编译器就不会为该类生成默认拷贝构造函数了,对于assignment operator也是如此. 1. 拷贝构造函数中记得调用父类的拷贝构造函数,或者相应复制过程 clas ...

  4. Chrome 声音自动播放抱错问题【play() failed】

    Chrome下调用play后抱错:DOMException: play() failed because the user didn't interact with the document firs ...

  5. iview框架modal中嵌套modal

    modal的使用是平级的,后面的会覆盖前面,如下<modal>111</modal><modal>222</modal>内容为222的弹框会在内容为11 ...

  6. Oracle中的索引详解(转载)

    一. ROWID的概念 存储了row在数据文件中的具体位置:64位 编码的数据,A-Z, a-z, 0-9, +, 和 /, row在数据块中的存储方式 SELECT ROWID, last_name ...

  7. Spring Boot Async异步执行

    异步调用就是不用等待结果的返回就执行后面的逻辑,同步调用则需要等带结果再执行后面的逻辑. 通常我们使用异步操作都会去创建一个线程执行一段逻辑,然后把这个线程丢到线程池中去执行,代码如下: Execut ...

  8. Data truncation: Out of range value for column 'id' at row 1 ### The

    org.springframework.dao.DataIntegrityViolationException: ### Error updating database. Cause: com.mys ...

  9. css positioning计算和jquery对应函数

  10. SQL点点滴滴_删除临时表

    select into 创建的表属于临时表,判断是否存在的方法 select c_adno,c_con_no into #temp from tb_contract IF OBJECT_ID( 'te ...