jQuery-笔记 案例: 电梯导航

实现的功能点

  1. 页面到today盒子 电梯导航就会出现
  2. 点击 电梯导航LI 计算出页面要去到的位置
  3. 滚动到 电梯导航 相应的内容区域 相对应的导航栏目会添加 .current
ul,li,div,p,body{margin:0;padding:0;}.box{width:800px;margin:auto;}.bigbox{width:100%;height:1000px;background-color:#eee;}.today{width:100%;height:100px;background-color:#999;}.box1,.box2,.box3,.box4{width:100%;height:800px;background-color:#ccc;margin:10px 0;}.fixedtool{position:fixed;left:10px;top:50%;width:80px;}.fixedtool ul li{line-height:25px;list-style:none;text-align:center;}.fixedtool ul li:hover,.current{background-color:red;color:#fff;}

html框架

<div class="box">
        <div class="bigbox">div>
        <div class="today">div>
        <div class="box1 in">家用电器div>
        <div class="box2 in ">手机通读div>
        <div class="box3 in">电脑办公div>
        <div class="box4 in">精品家具div>
    div>
    <div class="fixedtool">
        <ul>
            <li class="current">家用电器li>
            <li>手机通读li>
            <li>电脑办公li>
            <li>精品家具li>
        ul>
    div>

jQuery 代码写法

  $(function() {
      // 当我们点击 li  此时不需执行页面滚动事件里的LI的背景选择 添加 .current  可以用节流阀来解决
      var flag = true; //节流阀 互斥锁


      // 到today盒子 电梯导航就会出现
      var ftop = $(".today").offset().top;
      floortool();


      function floortool() {
          if ($(document).scrollTop() >= ftop) {
              $(".fixedtool").fadeIn();
          } else {
              $(".fixedtool").fadeOut();
          }
      }
      $(window).scroll(function() {
          floortool();
          // 滚动到  电梯导航 相应的内容区域  相对应的导航栏目会添加 .current
          if (flag) {
              $(".box .in").each(function(i, ele) {
                  if ($(document).scrollTop() >= $(ele).offset().top) {
                      $(".fixedtool li").eq(i).addClass("current").siblings().removeClass("current");
                  }
              })
          }
      })
      // 点击  电梯导航 滚动动一相应的内容区域
      $(".fixedtool li").click(function() {
          flag = false;
          // 点击 LI 计算出页面要去往的位置  
          // 选对应的索引号的内容区盒子, 计算卷去的顶部距离
          var current = $(".box .in").eq($(this).index()).offset().top;
          $("body,html").animate({
              scrollTop: current
          }, function() {
              flag = true;
          });
          // 
          $(this).addClass("current").siblings().removeClass("current");
      })

  })

你可能感兴趣的:(jquery,jquery)