即插即用javascript 导航/广告 窗口滚动跟随的效果

之前文章中介绍过4种方法实现导航窗口跟随置顶效果：

1、jQuery 导航菜单、广告 —— 固定、置顶、跟随

2、jQuery 智能判断跟随页面滚动的导航、菜单、广告，下拉后跟随置顶特效代码

3、jQuery - 多个菜单导航滚动跟随，全部积累固定在顶端

4、jquery 实现导航栏置顶跟随窗口滚动

以上四种方法都可以实现，最常用的就是第一个和第二个，这也是个人常用的导航跟随特效代码！

今天来分享的是即插即用的一种导航窗口跟随特效，老白很喜欢这种简单的特效：（亲测可用）

!DOCTYPE>
      html>
      head>
      meta http-equiv="Content-Type" content="text/html;
     charset=utf-8" />
      title>
    窗口滚动跟随的效果/title>
      /head>
      body>
      div id="wrapper" style="width:960px;
     margin:0 auto">
          div id="header" style="height:100px">
    h1>
    头部/h1>
    /div>
          !-- 除了 id="left" style="position:relative;
     top:0" ，其他的都只是摆设 -->
          div id="secondary_content" style="float:left;
     width:190px;
     background:#DDD;
     border:2px solid #660000;
     position:relative;
     top:0;
    ">
              h3>
    左侧栏区/h3>
            p>
     /p>
    p>
     /p>
    p>
     /p>
    p>
     /p>
    p>
     /p>
    p>
     /p>
          /div>
          div id="main_content" style="float:right;
     width:750px;
     background:#DDD;
     height:10000px">
    h2>
    右边内容区块/h2>
    /div>
      /div>
      /body>
      /html>
      script type="text/javascript">
    //获取对象的初始位置  var t = document.getElementById('secondary_content').offsetTop;
  window.onscroll = function() {
          //IE与Mozilla为前者，Chrome取后者的值      var scroll_top = document.documentElement.scrollTop || document.body.scrollTop;
           //滚动时分两种情况考虑，再赋值      document.getElementById('secondary_content').style.top = scroll_top >
     t ? scroll_top - t + 'px' : 0;
  }
      /script>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！