JavaScript 下滑一定高度自動固定頂部之二（簡單寫法）

levinit 發(fā)布于2019-08-20 18:08 / 3647人閱讀

摘要：滾動條下滑一定高度時，固定指定的導(dǎo)航條。使用方法修改中為需要固定導(dǎo)航的相應(yīng)效果當(dāng)滾動條下滑滾動超過導(dǎo)航欄位置時，導(dǎo)航欄固定移除原有，添加屬性并添加類名當(dāng)滾動條上滑高度低于原來導(dǎo)航高度時，導(dǎo)航欄變成默認效果移除原有，添加屬性并添加類名。

滾動條下滑一定高度時，固定指定 ID 的導(dǎo)航條。

使用方法：
1、修改 FixTop() 中 id 為需要固定導(dǎo)航的相應(yīng) id ；

效果：

當(dāng)滾動條下滑滾動超過導(dǎo)航欄位置時，導(dǎo)航欄固定 (移除原有，添加「position:fixed」屬性并添加 「fixtop」 類名)；
當(dāng)滾動條上滑高度低于原來導(dǎo)航高度時，導(dǎo)航欄變成默認效果(移除原有，添加「position:static」屬性并添加 「fixnone」類名)。

    function FixTop(obj) {
      var obj = document.getElementById(obj);
      var objOffset = obj.offsetTop;
      //console.log("對象高度"+ objOffset);
      window.onscroll = function() {
      var bodyScrollOffset = document.body.scrollTop;
      //console.log("往下滾動距離高度"+ bodyScrollOffset);
      var Result = objOffset - bodyScrollOffset;
      //console.log("對象減去滾動高度"+ Result);
      if (Result < 0 && bodyScrollOffset > objOffset) {
          obj.style.position = "fixed";
          obj.style.top = 0;
          obj.setAttribute("class", "fixtop");
      } else {
        obj.style.position = "static";
        obj.setAttribute("class", "fixnone");
      }
      }
    }

    FixTop("ID");//此處填入被固定對象的ID

效果示例：效果戳我。