固定导航栏/筋斗云案例

重点难点/功能:

一、固定导航栏
1.获取页面向上向下卷曲的距离值
2.兼容性
3.window 的滚动事件
4.更改样式
5.判断向上卷曲出去的距离和最上面的 div 的高度对比
6.设置后面的元素值防止有跳的效果
7.回值时的元素设置
8.固定浏览器在向下滑动时标题栏还在顶部，随着浏览器的上下滑动而改变

二、筋斗云
1.循环遍历给元素添加事件（鼠标进出，点击）
2.调用封装的函数
3.es6 写法与 es5 写法的小问题
4.鼠标进入时使用变速动画快速的滑动到鼠标位置
5.鼠标离开时自动回复到上一次的位子
6.当鼠标点击时就会记录位子最为父级位置返回去

效果图

固定导航栏图

筋斗云图

素材

固定导航栏

筋斗云

固定导航栏案例代码

Css

* {
  margin: 0;
  padding: 0
}

img {
  vertical-align: top;
}

.main {
  margin: 0 auto;
  width: 1000px;
  margin-top: 10px;

}

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

Html

<div class="top" id="topPart">
  <img src="images/top.png" alt="" />
</div>
<div class="nav" id="navBar">
  <img src="images/nav.png" alt="" />
</div>
<div class="main" id="mainPart">
  <img src="images/main.png" alt="" />
</div>

Js

  let topPart = document.querySelector("#topPart");
let navBar = document.querySelector("#navBar");

//获取页面向上或者向左卷曲出去的距离的值
getScroll = () => {
  return {
    left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
    top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
  };
}

// 滚动事件
window.onscroll = () => {
  //向上卷曲出去的距离和最上面的div的高度对比
  if (getScroll().top >= topPart.offsetHeight) {
    //设置第二个div的类样式
    navBar.className = "nav fixed"
    //设置第三个div的marginTop的值
    topPart.style.marginTop = navBar.offsetHeight + "px";
  } else {
    navBar.className = "nav"
    topPart.style.marginTop = 10 + "px";
  }
}

筋斗云案例代码

Css

* {
  margin: 0;
  padding: 0
}

ul {
  list-style: none
}

body {
  background-color: #333;
}

.nav {
  width: 800px;
  height: 42px;
  margin: 100px auto;
  background: url(images/rss.png) right center no-repeat;
  background-color: #fff;
  border-radius: 10px;
  position: relative;
}

.nav li {
  width: 83px;
  height: 42px;
  text-align: center;
  line-height: 42px;
  float: left;
  cursor: pointer;
}

.nav span {
  position: absolute;
  top: 0;
  left: 0;
  width: 83px;
  height: 42px;
  background: url(images/cloud.gif) no-repeat;
}

ul {
  position: relative;
}

Html

<div class="nav">
    <span id="cloud"></span>
    <ul id="navBar">
      <li>北京校区</li>
      <li>上海校区</li>
      <li>广州校区</li>
      <li>深圳校区</li>
      <li>武汉校区</li>
      <li>关于我们</li>
      <li>联系我们</li>
      <li>招贤纳士</li>
    </ul>
  </div>

Js

let cloud = document.querySelector("#cloud");
let li = document.querySelectorAll("#navBar li");

// es6 es6中的this调用的是windwo并不是调用当前的this
// mouseoverHandle = () => {
//   fn(cloud, this.offsetLeft)
//   console.log(this);
//   console.log(this.offsetLeft);
// }

// es5
function mouseoverHandle() {
  fn(cloud, this.offsetLeft)
}

let last = 0;

function clickHandle() {
  last = this.offsetLeft;
}

function mouseoutHandle() {
  fn(cloud, last);
}

for (let i = 0; i < li.length; i++) {
  // 鼠标移入
  li[i].onmouseover = mouseoverHandle;
  // 鼠标点击
  li[i].onclick = clickHandle;
  // 鼠标离开
  li[i].onmouseout = mouseoutHandle;
}

// 封装点击事件移动函数
//设置任意的一个元素,移动到指定的目标位置
fn = (element, target) => {
  clearInterval(element.timeId);
  //定时器的id值存储到对象的一个属性中
  element.timeId = setInterval(function () {
    //获取元素的当前的位置,数字类型
    var current = element.offsetLeft;
    //每次移动的距离
    var step = (target - current) / 10;
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    current += step;
    if (Math.abs(current - target) > Math.abs(step)) {
      element.style.left = current + "px";
    } else {
      //清理定时器
      clearInterval(element.timeId);
      //直接到达目标
      element.style.left = target + "px";
    }
  }, 20);
}