示例：

<!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. 基于Netty的NIO优化实践

    1. 浅谈React模型 2. Netty TCP 3. Netty UTP

  2. JS封装继承函数

    function extend(child,parent){ var F=function(){} F.prototype=parent.prototype; child.prototype=new ...

  3. 洛谷P1081 开车旅行(倍增)

    题意 题目链接 Sol 咕了一年的题解.. 并不算是很难,只是代码有点毒瘤 \(f[i][j]\)表示从\(i\)号节点出发走了\(2^j\)轮后总的距离 \(da[i][j]\)同理表示\(a\)的 ...

  4. js-滚动到指定位置导航栏固定顶部

    最近整理一下之前做的一个项目,把滚动条动态固定顶部的代码整理出来和大家分享,上代码 <!DOCTYPE html> <html> <head> <meta c ...

  5. C# 获取窗口句柄并且关闭应用程序

    原文:http://www.cnblogs.com/oraclejava/articles/1549025.html public class User32API { private static H ...

  6. 消息循环中的TranslateMessage函数和DispatchMessage函数，特别注意WM_TIMER消息

    原文:http://www.cnblogs.com/xingrun/p/3583357.html TranslateMessage函数 函数功能描述:将虚拟键消息转换为字符消息.字符消息被送到调用线程 ...

  7. Android 友盟统计的集成与使用（包含多渠道打包配置）

    前言 app上线后,一般公司都希望跟踪app在市场上的使用情况.包括新增用户.活跃用户.渠道信息.错误信息等,还有例如商城类的app,需要跟踪用户最喜欢浏览哪种类型的店铺或商品.这些都可以通过集成友盟 ...

  8. Redhat Linux 7.3 虚拟机通过USB挂载NTFS格式的移动硬盘

    分为如下几个步骤: 一.设置本地yum,安装gcc(如果本机已经安装gcc,则跳过此步) 在虚拟机连接linux iso安装盘 查看光盘挂载情况 mkdir /iso mount /dev/cdrom ...

  9. UTF-8文件编码格式中有无签名问题汇总(BOM)

    UTF-8签名(UTF-8 signature)也叫做BOM(Byte order Mark),是UTF编码方案里用于标识编码的标准标记.如果多个文件设置了签名,在二进制流中就会包含多个UTF-8签名 ...

  10. Java任务调度框架Quartz入门

    Quartz[kwɔːts]:石英,其框架和名字一样简单朴素又不失魅力,在Java程序界,Quartz大名鼎鼎,很多Java应用几乎都集成或构建了一个定时任务调度系统,Quartz是一个定时任务调度框 ...