示例：

<!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. curl POST JSON

    1. 场景 Controller接收json格式数据 封装bean @RequestMapping(value = "/bb", method = RequestMethod.PO ...

  2. html注册表

    这是第一次使用html写一个简单的注册表(有不对的地方希望大家可以帮我指出来谢谢

  3. 数组多功能splice()方法的插入，删除，替换

    多功能splice()插入.删除.替换 <script type="text/javascript"> var arr=['A','B','C','D','E','F' ...

  4. lua 中的上n级模块路径函数分享

    --- 得到 lua 模块路径的上 n 级,返回的的字符串结尾有个 "." 字符 -- @usage getUpFloder("math.base.core", ...

  5. C# 程序启动最小化至任务栏及闪烁

    主要功能: C#让窗体最小化至任务栏,同时在系统托盘区的图标点击左键能显示窗体,并使窗体闪烁. 首先: 创建窗体应用程序,并添加控件NotifyIcon及ContextMenuStrip控件 Noti ...

  6. windows的共享内存

    https://blog.csdn.net/stpeace/article/details/39534361

  7. 关于mysql启动问题---mysqld_safe mysqld from pid file * ended

    #在[mysqld]中添加: datadir = /usr/local/mysql/data         #添加 log-error = /usr/local/mysql/data/error.l ...

  8. oracle获得ddl语句

    dbms_metadata.get_ddl()用于获取对象的DDL,其具体用法如下.注意:在sqlplus里,为了更好的展示DDL,需要设置如下参数:set line 200set pagesize ...

  9. 一个较复杂的执行redis的lue脚本

  10. NET(C#)：使用HttpWebRequest头中的Range下载文件片段

    转自:http://www.mgenware.com/blog/?p=220 HTTP请求包头信息中有一个Range属性可以指定索取部分HTTP请求的文件.在.NET中则通过HttpWebReques ...