悬浮固定菜单

重要元素:

display:  block、inline、inline-block,   block 单独一行,可设宽、高;inline 和其它元素在一行,无法设宽高;inline-block  可与其它元素在一行,可设宽高

offsetTop 是指元素距离顶部的距离,而 scrollTop是指右侧滚动条距离顶部的距离

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style type="text/css" media="screen">

   #warp {
        height: 2000px;
        width:1000px;
        margin-left:auto;
        margin-right:auto;
        text-align: center;
   }

   #header {
          height: 150px;
   }    

   #nav {
        background-color: #3B0707;
        /*text-align: center;*/
        position: relative;
     /*height: 50px;*/
     /*margin: auto;*/
     padding:10px;
     width:1000px;
     top:0;
   }
   #nav a{
     display:inline-block;
        color: #FCF4F4;
        width:15%;
   }

</style>

<script type="text/javascript">

    window.onload= function(){
        var obj = document.getElementById("nav");
        var objHeight = obj.offsetTop;

        window.onscroll = function(){
             var obj = document.getElementById("nav");
             var scrollTop = document.body.scrollTop;

             if(objHeight>scrollTop)
             {
                 obj.style.position = "relative";
             }
             else
             {
                 obj.style.position = "fixed";
             }
        }
    }

</script>

</head>
<body id="warp">
  <div id="header">

  </div>
  <div id="nav">

            <a href="">页面设计</a>
            <a href="">合作伙伴</a>
            <a href="">渠道合作</a>
            <a href="">媒体交流</a>

  </div>

</body>
</html>

另一种方法:

$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效

jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。  == 静态方法
jQuery.fn.extend(object);给jQuery对象添加方法。  == 类成员函数

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>test</title>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"></script>
    <style type="text/css">
        .ndiv{ width:900px; height:100px; border:1px solid #ccc;background: #f1f1f1;}
        .fix-div{ position:fixed; top:0px;}
        p {line-height: 50px; }
    </style>
</head>
<body>
<div style="margin: 100 auto; height: 200px;"></div>
<div id="mydiv" class="ndiv" >di222v</div>

             <p>悬浮经典实例请参考:米扑代理</p>

            <p>米扑代理价格表实例: </p>

            <p><a href="http://proxy.mimvp.com/price.php">http://proxy.mimvp.com/price.php</a></p>

             <p>悬浮经典实例请参考: 米扑代理</p>

            <p>米扑代理价格表实例: </p>

            <p><a href="http://proxy.mimvp.com/price.php">http://proxy.mimvp.com/price.php</a></p>

             <p>悬浮经典实例请参考: 米扑代理</p>

            <p>米扑代理价格表实例: </p>

            <p><a href="http://proxy.mimvp.com/price.php">http://proxy.mimvp.com/price.php</a></p>

<div style="height:2700px;"></div>

<script type="text/javascript">
    $.fn.fixedDiv = function(actCls){
        var pos = 0,
            that = $(this),
            topVal;

        if(that.length > 0){
            topVal = that.offset().top;
        }

        function fix(){
            pos = $(document).scrollTop();

            if (pos > topVal) {
                that.addClass(actCls);
                // if (!window.XMLHttpRequest) {
                //     that.css({
                //         position: ‘absolute‘,
                //         top     : pos
                //     });
                // }
            } else {
                that.removeClass(actCls);
                // if (!window.XMLHttpRequest) {
                //     that.css({
                //         position: ‘static‘,
                //         top     : ‘auto‘
                //     });
                // }

            }
        }

        $(window).scroll(fix);
    }

    $(‘#mydiv‘).fixedDiv(‘fix-div‘);
</script>
</body>
</html>
        <style></style>
                <script></script>
    

another way :

<!DOCTYPE html>
<html>
  <head>
    <meta charset=‘utf-8‘ />
    <!-- js引用包 -->
    <script src=‘http://libs.baidu.com/jquery/1.9.0/jquery.min.js‘></script> 

    <style>
      html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:‘‘;content:none}table{border-collapse:collapse;border-spacing:0}#wrapper {
        width: 100%;
        position: relative;
      }

      #container {
        width: 100%;
        position: relative;
        background: #303030;
        z-index: -5;
      }

      header.home {
        max-width: 760px;
        position: relative;
        margin: 0 auto;
        text-align: center;
      }
      header.home img {
        max-width: 300px;
        margin: 0 auto;
        position: relative;
        text-align: center;
      }

      .home-title {
        font-family: "coquette";
        font-size: 3em;
        color: white;
        margin: 10px 0px 20px 0px;
      }

      .home-desc {
        font-family: "coquette";
        font-size: 1.8em;
        color: white;
        margin: 0px 0px 20px 0px;
        line-height: 1.3em;
      }

      #top_intro {
        width: 100%;
      }

      .le-background {
        position: fixed;
        top: 0px;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        z-index: -2;
        opacity: 0.6;
        background: #303030;
        background-size: cover !important;
        background-position: center;
        background-repeat: no-repeat no-repeat;
      }

      .blurred {
        opacity: 0;
      }

      #mainMenuBar {
        width: 100%;
        background-color: white;
        z-index: 100;
      }
      #mainMenuBar ul {
        margin: 0 auto;
        text-align: center;
        position: relative;
        padding: 20px;
        border-bottom: 1px solid black;
      }
      #mainMenuBar li {
        display: inline-block;
        color: black;
        margin-left: 30px;
        font-size: 1.2em;
        font-family: "proxima-nova";
        font-weight: 100;
      }

      #content {
        width: 100%;
        position: relative;
        background-color: white;
        padding-top: 20px;
      }
      #content p {
        font-size: 1.2em;
        font-family: "proxima-nova";
        font-weight: 100;
        max-width: 640px;
        margin: 0 auto;
        line-height: 1.4em;
        padding: 10px 0px 10px 0px;
      }

      .stick {
        position: fixed;
        top: 0;
      }

    </style>
  </head>
  <body>
    <div id="wrapper">
  <div id="container">

    <div id="top_intro">
    <div id="bl-img">
<div class="le-background"></div>
<div class="le-background blurred"></div>
</div>

    <header class="home">
<div class="logo"><img src="http://wizardwiz.co.uk/ww/logo_w_trans.png" /></div>
<h1 class="home-title">Waney Wood</h1>
<h2 class="home-desc">WaneyWood produces a range of distinctive home products all handcrafted with wood, from our workshop in Devon, England and all timber is purchased locally from sustainable sources</h2>
</header>

    </div>

    <div id="mainMenuBarAnchor"></div>
    <div id="mainMenuBar">
    <ul>
      <li>Home</li>
            <li>Shop</li>
            <li>Blog</li>
      <li>About Us</li>
            <li>Contact</li>
      </ul>
    </div>
    <div id="content">

     <p> Lorem ipsum dolor sit amet, tamquam equidem adipisci at his, eu vix purto feugiat dignissim. At vix soleat debitis, eruditi dolorem interpretaris te per. Eam antiopam elaboraret ad, at quis argumentum dissentiunt eam. Qui dissentiunt complectitur et, ad vix minim ignota. Ei timeam deserunt forensibus eum, doming fabellas qui te, dicta errem corrumpit ei pro. Assentior adversarium vis no.</p>

<p>Ex vel albucius iracundia, errem ancillae at mei. Invidunt facilisi at eum, dicit accusamus duo ne. Doming antiopam suscipiantur eu usu, ea falli aeque usu. Pro minim postea everti in, pro at aeterno integre delenit. Mea verear definitionem cu.</p>

<p>Qui no ornatus expetenda, at usu assum discere deterruisset, quis antiopam recteque te pro. At eum ferri dignissim. Putent meliore ne ius, ubique facilisi eos ad. Mel at eius tation inermis, vide veniam euismod vix ad. Sed ut reque soluta lucilius, pri bonorum ceteros ea, vix cu nonumy facilis. Sed partem eruditi omittam an.</p>

<p>Posidonium cotidieque referrentur at vel, ut periculis consetetur interpretaris sit. Mei melius albucius no, duo id impetus comprehensam, causae blandit pericula ne has. Nec suas solet detracto an. Suscipit delicatissimi ad nam, at eos fabellas necessitatibus. Ex pri legendos persecuti, id sit latine saperet, timeam deseruisse et nec. Sit ne adhuc accusamus.</p>

<p>Vel ei volumus minimum evertitur, vis case vocibus accusam ne, copiosae phaedrum percipitur no sea. His meis interpretaris in, odio iriure facilis sed in. Cum recusabo sapientem iracundia ex, constituto consetetur usu in. Eum noluisse voluptua eu, ea vim tation postulant. Sit ut sale singulis, te mea tritani delenit reprehendunt. Consul eleifend efficiendi vel ad. Ut mea reque concludaturque, duis noster ut has, nam stet periculis ullamcorper no.</p>

      <p> Lorem ipsum dolor sit amet, tamquam equidem adipisci at his, eu vix purto feugiat dignissim. At vix soleat debitis, eruditi dolorem interpretaris te per. Eam antiopam elaboraret ad, at quis argumentum dissentiunt eam. Qui dissentiunt complectitur et, ad vix minim ignota. Ei timeam deserunt forensibus eum, doming fabellas qui te, dicta errem corrumpit ei pro. Assentior adversarium vis no.</p>

<p>Ex vel albucius iracundia, errem ancillae at mei. Invidunt facilisi at eum, dicit accusamus duo ne. Doming antiopam suscipiantur eu usu, ea falli aeque usu. Pro minim postea everti in, pro at aeterno integre delenit. Mea verear definitionem cu.</p>

<p>Qui no ornatus expetenda, at usu assum discere deterruisset, quis antiopam recteque te pro. At eum ferri dignissim. Putent meliore ne ius, ubique facilisi eos ad. Mel at eius tation inermis, vide veniam euismod vix ad. Sed ut reque soluta lucilius, pri bonorum ceteros ea, vix cu nonumy facilis. Sed partem eruditi omittam an.</p>

<p>Posidonium cotidieque referrentur at vel, ut periculis consetetur interpretaris sit. Mei melius albucius no, duo id impetus comprehensam, causae blandit pericula ne has. Nec suas solet detracto an. Suscipit delicatissimi ad nam, at eos fabellas necessitatibus. Ex pri legendos persecuti, id sit latine saperet, timeam deseruisse et nec. Sit ne adhuc accusamus.</p>

<p>Vel ei volumus minimum evertitur, vis case vocibus accusam ne, copiosae phaedrum percipitur no sea. His meis interpretaris in, odio iriure facilis sed in. Cum recusabo sapientem iracundia ex, constituto consetetur usu in. Eum noluisse voluptua eu, ea vim tation postulant. Sit ut sale singulis, te mea tritani delenit reprehendunt. Consul eleifend efficiendi vel ad. Ut mea reque concludaturque, duis noster ut has, nam stet periculis ullamcorper no.</p>

      <p> Lorem ipsum dolor sit amet, tamquam equidem adipisci at his, eu vix purto feugiat dignissim. At vix soleat debitis, eruditi dolorem interpretaris te per. Eam antiopam elaboraret ad, at quis argumentum dissentiunt eam. Qui dissentiunt complectitur et, ad vix minim ignota. Ei timeam deserunt forensibus eum, doming fabellas qui te, dicta errem corrumpit ei pro. Assentior adversarium vis no.</p>

<p>Ex vel albucius iracundia, errem ancillae at mei. Invidunt facilisi at eum, dicit accusamus duo ne. Doming antiopam suscipiantur eu usu, ea falli aeque usu. Pro minim postea everti in, pro at aeterno integre delenit. Mea verear definitionem cu.</p>

<p>Qui no ornatus expetenda, at usu assum discere deterruisset, quis antiopam recteque te pro. At eum ferri dignissim. Putent meliore ne ius, ubique facilisi eos ad. Mel at eius tation inermis, vide veniam euismod vix ad. Sed ut reque soluta lucilius, pri bonorum ceteros ea, vix cu nonumy facilis. Sed partem eruditi omittam an.</p>

<p>Posidonium cotidieque referrentur at vel, ut periculis consetetur interpretaris sit. Mei melius albucius no, duo id impetus comprehensam, causae blandit pericula ne has. Nec suas solet detracto an. Suscipit delicatissimi ad nam, at eos fabellas necessitatibus. Ex pri legendos persecuti, id sit latine saperet, timeam deseruisse et nec. Sit ne adhuc accusamus.</p>

<p>Vel ei volumus minimum evertitur, vis case vocibus accusam ne, copiosae phaedrum percipitur no sea. His meis interpretaris in, odio iriure facilis sed in. Cum recusabo sapientem iracundia ex, constituto consetetur usu in. Eum noluisse voluptua eu, ea vim tation postulant. Sit ut sale singulis, te mea tritani delenit reprehendunt. Consul eleifend efficiendi vel ad. Ut mea reque concludaturque, duis noster ut has, nam stet periculis ullamcorper no.</p>

    </div>

  </div>
</div>
  </body>

  <script style=‘text/javascript‘>

      $(document).ready(function() {
          // Cache selectors for faster performance.
          var $window = $(window),
              $mainMenuBar = $(‘#mainMenuBar‘),
              $mainMenuBarAnchor = $(‘#mainMenuBarAnchor‘);

          // Run this on scroll events.
          $window.scroll(function() {
              var window_top = $window.scrollTop();
              var div_top = $mainMenuBarAnchor.offset().top;
              if (window_top > div_top) {
                  // Make the div sticky.
                  $mainMenuBar.addClass(‘stick‘);
                  $mainMenuBarAnchor.height($mainMenuBar.height());
              }
              else {
                  // Unstick the div.
                  $mainMenuBar.removeClass(‘stick‘);
                  $mainMenuBarAnchor.height(0);
              }
          });
      });

    </script>
</html>

下载链接:http://files.cnblogs.com/files/hzijone/mimvp_navi_demo.rar

时间: 2024-11-06 09:51:29

悬浮固定菜单的相关文章

css3实现光标悬浮滚动菜单

效果:http://hovertree.com/texiao/css3/21/ 本文所用到的CSS知识请点击效果展示也中第一和第二个链接. 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>css3实现光标悬浮滚动菜单 - 何问起</

固定菜单页面滚动效果

在一个单页面设置一个主菜单,当页面滚动时主菜单位置固定在页面窗口中不动,或左或右,或上或下.当单击菜单项时,页面滚动到菜单对应的内容区,当页面滚动到预定内容位置时,对应的菜单项变为当前选中样式. 此效果可以应用在一些内容比较长的单页设计,本文将介绍使用JjQuery和css来实现这一效果,demo中分别有菜单居左.居右及底部效果,点击demo看效果: HTML 本例html来自本站文章:ScrollTo:平滑滚动到页面指定位置中的DEMO,我们在页面中的#main内放置一个主菜单ul.nav,并

关于使用css3属性:transform固定菜单位置,在滑动页面时菜单闪现抖动的问题

1 myScroll = new IScroll('#h-s-wrapper', { 2 scrollX: true, 3 scrollY: true, 4 probeType: 3, 5 mouseWheel: true, 6 bounce: false, //锁定边界,不允许拖拽 7 //click: true 8 //preventDefault: false, 9 preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|S

悬浮固定

15858111507 qq1243490459 //提醒<a href="http://www.crazyit.org" onclick="return confirm('是否转入疯狂Java联盟?');">疯狂Java联盟</a> <div style="height:45px; width:100%;; position: fixed; bottom:45px; right:0px; z-index:999; backg

导航栏置顶固定悬浮

<!doctype html><html><head><meta charset="utf-8"><title>网友分享jQuery导航菜单悬浮置顶特效</title><style type="text/css"> *{ margin:0; padding:0;} body{ background:#eee; text-shadow:0px 1px 0px rgba(255,255,

五中常用简洁后台导航菜单(一级导航,二级导航,手风琴式导航,左或右悬浮式导航,树状导航)

首先附上源码,可以下载! http://yunpan.cn/cd9ivPcL4ayQT (提取码:d8a5) 在建立导航菜单的时候,我们首先布局一个(" 头"+[左,右(自适应)]+”尾“)的HTML页面: 来看一下HTML页面的编写: <div id="container"> <div id="head"></div> <div id="mainContent"> <di

android菜单简易笔记

API Guides ----UI------Menus Menu是一个通用UI组件,提供类似用户使用助手 3.0(API 11)安卓不再提供一个专用的菜单按钮,安卓APP应用当中最多可以出现6个菜单,如果要提供更多选项,在下发会出现一个more,点击后出现其他选项.使用菜单键有3种方式 options menu 收集菜单选项提供给APP ,可以放置一些全局按钮,比如,搜索,设置, Compose; 在android 2.3 以下是存在真实按钮的:使用3.0或者更高版本会提供 actionbar

滚动固定TAB在顶部显示

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" conte

它们的定义android滑动菜单

在这里实现了两个滑动菜单效果,的拖放内容的第一部分,菜单拖出像这样的效果感觉,另一种是拖动内容.后面的内容固定菜单.我感觉有层次感的效果,如下面 第一种效果的代码实现例如以下: package com.tenghu.customsideslip.menu.view; import android.content.Context; import android.os.AsyncTask; import android.util.AttributeSet; import android.util.D