示例：

<!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. 谈谈HTML5中的history.pushSate方法，弥补ajax导致浏览器前进后退无效的问题

    移动端为了减少页面请求,有时候需要通过单页面做成多页面的效果,最近有这么个需求,表单填完后执行第一步,然后执行第二步,第二步执行完后再执行第三步,每一步都要保留之前的数据.这种情况用单页面实现再合适不 ...

  2. webservice使用windows身份验证,ajax请求报错401未授权的解决办法

    $.ajax({ type: "GET", url: service_url, dataType: "xml", data: "ParamId=&qu ...

  3. Intellij IDEA快捷键大全汇总

    Alt+回车 导入包,自动修正 Ctrl+N   查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L  格式化代码 Ctrl+Alt+O 优化导入的类和包 Alt+Insert 生成代码 ...

  4. Java 之变量和常量（2）

    Java中的关键字: Java 语言中有一些具有特殊用途的词被称为关键字.关键字对 Java 的编译器有着特殊的意义,在程序中应用时一定要慎重哦!! Java 中常用关键字: 问:这么多,记不住啊.. ...

  5. SpringMVC学习（四）——处理器Handler的各种常用实现

    代码:http://files.cnblogs.com/files/douJiangYouTiao888/MultiActionController.zip 在使用springMVC的开发过程中,Ha ...

  6. LeetCode-Maximal Rectangle [学以致用] ZZ

    http://www.cnblogs.com/lichen782/p/leetcode_maximal_rectangle.html 题目: Given a 2D binary matrix fill ...

  7. php红包生成随机算法

    一.适用场景 红包总金额X,分配成Y个红包,每个红包随机金额. 二.生成算法 /** * 红包生成算法 * @param $money 总金额 * @param $number 红包数量 * @par ...

  8. ZT linux 线程私有数据之 一键多值技术

    这个原作者的这个地方写错了 且他举的例子非常不好.最后有我的修正版本 pthread_setspecific(key, (void *)&my_errno); linux 线程私有数据之一键多 ...

  9. ZT Factory Pattern

    图中的虚线箭头表示依赖关系

  10. [EffectiveC++]item34：区分接口继承和实现继承

    [EffectiveC++]item34:区分接口继承和实现继承