示例：

<!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. poj 1141 Brackets Sequence ( 区间dp+输出方案 )

    http://blog.csdn.net/cc_again/article/details/10169643 http://blog.csdn.net/lijiecsu/article/details ...

  2. jQuery多次选中checkbox失效

    在做项目的过程中,遇到一个问题.就是使用jquery的attr方法即 $("#aaa").attr('checked',true); $("#aaa").att ...

  3. mac 安装mysql-python

    ln -s /usr/local/mysl/bin/* /usr/bin  #建立软连接 sudo pip install mysql-python    #安装 python             ...

  4. java 多线程执行过程

    1.分支线程执行 过程: 2．线程运行的状态:五大状态 线程: 从新建状态  就绪状态   运行状态  挂起(阻塞)状态 死亡状态(结束,销毁) 3. 多线程:在同一个时间执行多个任务的操作,现在的软 ...

  5. Echarts按需引入后没有显示图例问题

    因为Echarts官网的例子都是引入整个Echarts.js.如果使用按需引入对应模块就要记得引入legend模块,才能显示出图例. 例如这样: require("echarts/lib/c ...

  6. 【OBJC】数字转中文大写

    博客园都不知道怎么外链图片…… - (void)numToString:(double)num{ ; NSMutableString *szChMoney = [[NSMutableString al ...

  7. angular 动态组件类型

    出处:https://github.com/Penggggg/angular-component-practices 组件类型1:纯函数功能,而没有视图部分,即Factory(类似于$http) pr ...

  8. web images

    ps切图时,我们保存时会要求选择文件格式. 一般来说,如果图像的色彩丰富,没有透明度的要求,则选择为jpeg格式: 如果图像色彩不丰富,我们就选择为png-8的格式,注意:ps中要选择无杂边,无仿色 ...

  9. Detecting Client Connection in WCF Long Running Service (Heartbeat Implementation) z

    Download source - 45.3 KB Introduction Hello everyone! This is my first blog on WCF and I hope that ...

  10. 【Leetcode】【Hard】Reverse Nodes in k-Group

    Given a linked list, reverse the nodes of a linked list k at a time and return its modified list. If ...