置顶菜单：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>置顶菜单</title>

    <script type="text/javascript" src="jquery-1.12.4.min.js"></script>

    <script type="text/javascript">

        $(function () {

            $(window).scroll(function(){

                var nowTop = $(document).scrollTop();

                if(nowTop>200){

                    $('.menu').css({

                        position:'fixed',

                        left:'50%',

                        top:'0',

                        marginLeft:-480

                    });

                    $('.menu_pos').show()

                }

                else{

                    $('.menu').css({

                        position:'static',

                        marginLeft:'auto'

                    });

                    $('.menu_pos').hide();

                }

                if(nowTop>400){

                    $('.totop').fadeIn();

                }

                else{

                    $('.totop').fadeOut();

                }

            });

            $('.totop').click(function () {

                $('html,body').animate({'scrollTop':0})

            })

        })

    </script>

    <style type="text/css">

        body{margin:0;}

        .logo_bar{

            width:960px;

            height:200px;

            background-color: darksalmon;

            margin:0 auto;

        }

        .menu,.menu_pos{

            width:960px;

            height:50px;

            margin:0 auto;

            background-color: antiquewhite;

            text-align: center;

            line-height:50px;

        }

        .menu_pos{

            display:none;

        }

        .down_con{

            width:960px;

            height:1800px;

            margin:0 auto;

        }

        .down_con p{

            margin-top:100px;

            text-align:center;

        }

        .totop{

            width:50px;

            height:50px;

            background: url(images/01.jpeg) center center no-repeat #000;

            border-radius:50%;

            position: fixed;

            right:50px;

            bottom:50px;

            display: none;

        }

    </style>

</head>

<body>

    <div class="logo_bar">顶部logo</div>

    <div class="menu">置顶菜单</div>

    <!--置顶菜单不定位的时候就隐藏，定位的时候就显示出来-->

    <div class="menu_pos"></div>

    <div class="down_con">

        <p>网站主内容</p>

        <p>网站主内容</p>

        <p>网站主内容</p>

        <p>网站主内容</p>

        <p>网站主内容</p>

    </div>

    <!--回到顶部-->

    <a href="javascript:;" class="totop"></a>

</body>

</html>

效果展示：

jquery——制作置顶菜单的更多相关文章

  1. 置顶菜单demo

    一朋友需要置顶菜单的功能,给了个网站,让弄下来.看了下,就把样式及效果拔了下来.去掉了复杂的东西,只保留了其基本实现.有需要的朋友可以拿去用用. <style> #navigation{ ...

  2. jQuery实现置顶和置底特效

    原文地址:http://www.jqueryba.com/3403.html <script src="jquery.min.js" type="text/java ...

  3. jQuery+Superfish制作下拉菜单

    superfish制作下拉菜单真的很方便而好很好用,而且还可以通过Superfish提供的参数来控制下拉菜单的不同效果,而且他没有层级限制,换句话说可以通过Superfish来写你想要的层级菜单. 官 ...

  4. jQuery制作右侧边垂直二级导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jQuery实现表格行上移下移和置顶

    jQuery实现表格行上移下移和置顶 我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现 ...

  6. jQuery操作table数据上移、下移和置顶

    jQuery 操作table中的tr换行的步骤如下: 1.获取当前tr var $tr = $(this).parents("tr"); 2.移动tr //上移 $tr.prev( ...

  7. jQuery制作水平多级下拉菜单

    本篇体验使用jQuery制作水平的.多级的.下拉菜单. 下拉菜单的html部分如下. <body> <nav class="main-nav"> <u ...

  8. jQuery 元素的选中， 置顶、上移、下移、置底、删除

    如截图: <ul> <li class="li01" onclick="C_columnSetTop(this)"><i>& ...

  9. jquery实现标签上移、下移、置顶

    eg:如在后台的标签列表中,实现上移.下移.置顶功能 思路: 1.先用到的克隆方法.clone(true): 即把当前要移动的项先保存好,备于后用. 2.找到当前标签所对应的相关元素及其相关方法: 如 ...

随机推荐

  1. oracle 12c 新特性之不可见字段

    在Oracle 11g R1中,Oracle以不可见索引和虚拟字段的形式引入了一些不错的增强特性.继承前者并发扬光大,Oracle 12c 中引入了不可见字段思想.在之前的版本中,为了隐藏重要的数据字 ...

  2. 恢复到特定点（时间点、scn、日志序列号），rman不完全恢复

    将数据库.表空间.数据文件等恢复至恢复备份集保存时间中的任何一个时间点/SCN/日志序列(一般是日志挖掘找到误操作点),但须谨慎,操作前一定需要做好备份,具备条件的情况下最好先恢复到异机,避免业务停机 ...

  3. python中全局变量的使用

    python中在module定义的变量可以认为是全局变量, 而对于全局变量的赋值有个地方需要注意. test.py ------------------------------------------ ...

  4. 【转】Unity3D如何制作落叶效果

    原文地址:http://hi.baidu.com/cupgenie/item/c23861df692f59e3b3f777a8 创建一个粒子系统 GameObject>Create other& ...

  5. 机器学习：scikit-learn中算法的调用、封装并使用自己所写的算法

    一.scikit-learn库中的kNN算法 scikit-learn库中,所有机器学习算法都是以面向对象的形式进行包装的: 所有scikit-learn库中机器学习算法的使用过程:调用.实例化.fi ...

  6. nop前端分页实现思路及步骤

    注:nop本身已经有啦可以实现分页的类,所以我们直接去使用就可以啦 . (编程部分)步骤如下: 第一步,针对Model操作,在需要使用分页的界面Model中将分页类作为该Model类的成员,并在Mod ...

  7. Java enum（枚举）使用详解之三

    DK1.5引入了新的类型——枚举.在 Java 中它虽然算个“小”功能,却给我的开发带来了“大”方便. 用法一:常量 在JDK1.5 之前,我们定义常量都是: publicstaticfianl... ...

  8. 使用LookAndFeel为界面更换皮肤

    ----------------siwuxie095                             在 Windows 系统中,默认的 Java 运行环境(JRE)会为当前的窗体程序 指定一 ...

  9. Angular14 利用Angular2实现文件上传的前端、利用springBoot实现文件上传的后台、跨域问题

    一.angular2实现文件上传前端 Angular2使用ng2-file-upload上传文件,Angular2中有两个比较好用的上传文件的第三方库,一个是ng2-file-upload,一个是ng ...

  10. EPEL for CentOS or Redhat

    注:地址可能会变 RHEL/CentOS 7 64 Bit # wget http://dl.fedoraproject.org/pub/epel/beta/7/x86_64/epel-release ...