當滑鼠滾動到指定位置，選單固定在頂部

antzone發表於2018-07-09

本章節分享一段程式碼例項，它實現了滑鼠滾動的時候，開始導航選單也是一起滾動的。

當滾動到一定的尺寸，比如到達頂端的時候就可以固定。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin:0px;
  padding:0px;
}
.wrapper {
  width: 1000px;
  height: 2000px;
  margin-left: auto;
  margin-right: auto;
}
.header {
  height: 150px;
}
#nav {
  padding: 10px;
  position: relative;
  top: 0;
  background: black;
  width: 1000px;
}
a {
  display: inline-block;
  margin: 0 10px;
  *display: inline;
  zoom: 1;
  color: white;
}
</style>
<script>
function menuFixed(id) {
  var obj = document.getElementById(id);
  var _getHeight = obj.offsetTop;
  window.onscroll = function () {
    changePos(id, _getHeight);
  }
}
 
function changePos(id, height) {
  var obj = document.getElementById(id);
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop < height) {
    obj.style.position = 'relative';
  } else {
    obj.style.position = 'fixed';
  }
}
 
window.onload = function () {
  menuFixed('nav');
}
</script>
</head>
<body>
<div class="wrapper">
  <div class="header"></div>
  <div id="nav">
    <a href="#">螞蟻部落一</a>
    <a href="#">螞蟻部落二</a>
    <a href="#">螞蟻部落三</a>
    <a href="#">螞蟻部落四</a>
    <a href="#">螞蟻部落五</a>
  </div>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.function menuFixed(id) {}，引數是要懸停玄素的id屬性值。

（2）.var obj = document.getElementById(id)，獲取對應的元素物件。

（3）.var _getHeight = obj.offsetTop，獲取元素距離body元素頂端的距離。

（4）.window.onscroll = function () {

  changePos(id, _getHeight);

}，註冊onscroll事件處理函式。

也就是當拖動滾動條的時候會呼叫changePos()方法。

（5）.function changePos(id, height) {}，第一個引數是元素的id屬性值，第二個引數是元素距離body頂部的距離。

（6）.var obj = document.getElementById(id)，獲取對應的元素物件。

（7）.var scrollTop = document.documentElement.scrollTop || document.body.scrollTop，獲取向上滾動的尺寸。

（8）.if (scrollTop < height) {

    obj.style.position = 'relative';

} else {

  obj.style.position = 'fixed';

}，如果向上滾動的尺寸小於元素距離body頂端的尺寸，那麼元素的定位方式為相對定位。

否則就是fixed定位方式。

二.相關閱讀:

（1）.offsetTop參閱JavaScript offsetTop一章節。

（2）.onscroll事件參閱JavaScript scroll事件一章節。

（3）.scrollTop參閱JavaScript scrollTop一章節。

相關文章