純 javascript 半自動式下滑一定高度，導航欄固定

raise_yang 發布于2019-08-20 17:06 / 2417人閱讀

摘要：滾動條下滑一定高度時，固定指定的導航條。固定對象距離頂部高度為去掉前面的雙斜杠，然后在頁面中刷新并向下滾動，頁面就彈出的高度。效果示例效果戳我。當前做法已經不建議，建議使用最新效果新地址

滾動條下滑一定高度時，固定指定 ID 的導航條。

使用方法：
1、修改 FixTop() 中 id 為需要固定導航的相應 id ；
2、修改 FixTop() 中 offsettop 為需要固定對象導航距離頂部的距離；

效果：

當滾動條下滑滾動超過導航欄位置時，導航欄固定 (移除原有，添加「position:fixed」屬性并添加「fixtop」類)；

當滾動條上滑高度低于原來導航高度時，導航欄變成默認效果(移除原有，添加「position:static」屬性并添加「fixnone」類)。

function FixTop(obj,offsettop){
  var obj = document.getElementById(obj);
  var objOffset = obj.offsetTop;
  // alert("固定對象距離頂部高度為" + objOffset);
  //去掉 alert 前面的雙斜杠，然后在頁面中刷新并向下滾動，頁面就彈出 offsettop 的高度。
  var bodyScrollOffset = document.body.scrollTop;
  var Result = objOffset - bodyScrollOffset;
  sessionStorage.objoffset = objOffset;
  // console.log(Result);
  if (Result < 0) {
    if (bodyScrollOffset < offsettop) {
      obj.style.position = "static";
      obj.setAttribute("class", "fixnone");
    }else{
      obj.style.position = "fixed";
      obj.style.top = 0;
      obj.setAttribute("class", "fixtop");
    }
  }else{
    obj.style.position = "static";
    obj.setAttribute("class", "fixnone");
  }
}
window.onscroll = function(){
  FixTop("id",offsettop);
}

效果示例：效果戳我。

當前做法已經不建議，建議使用最新效果：新地址

GPU云服務器云服務器 html下滑式網頁狀態欄高度狀態欄的高度導航欄

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83403.html

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

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

levinit 2019-08-20 18:08 評論0 收藏0
前端插件庫

摘要：原文鏈接前端插件庫站點前端開發文檔博客前端插件庫前端插件庫官網是的函數庫，目的是強化表格操作如搜索排序，并自動加入組件引入表格中，使用非常靈活簡便。由推出，靈活扎實的建議列表函數庫。原文鏈接：前端插件庫站點：前端開發文檔博客：前端插件庫前端插件庫 DataTables 官網：https://www.datatables.net/ DataTables是jQuery的JavaScr...

高勝山 2019-08-26 13:44 評論0 收藏0
前端插件庫

摘要：原文鏈接前端插件庫站點前端開發文檔博客前端插件庫前端插件庫官網是的函數庫，目的是強化表格操作如搜索排序，并自動加入組件引入表格中，使用非常靈活簡便。由推出，靈活扎實的建議列表函數庫。原文鏈接：前端插件庫站點：前端開發文檔博客：前端插件庫前端插件庫 DataTables 官網：https://www.datatables.net/ DataTables是jQuery的JavaScr...

shusen 2019-08-30 10:53 評論0 收藏0
移動端H5頁面注意事項

摘要：移動端活動頁面常常需要能夠分享到各種社交中，常用的有微信等。微信二維碼問題同一個頁面里要是有兩個二維碼，長按掃描總是只能掃出左側第一個二維碼。首發于簡書博客：http://www.jianshu.com/p/e958... 2017-11-25 更新：5. 使用 Gulp 拼合圖片 1. 單個頁面內容不能過多設計常用尺寸：750 x 1334 / 640 x 1134，包含了手機頂...

weknow619 2019-08-01 18:04 評論0 收藏0
移動端H5頁面注意事項

摘要：移動端活動頁面常常需要能夠分享到各種社交中，常用的有微信等。微信二維碼問題同一個頁面里要是有兩個二維碼，長按掃描總是只能掃出左側第一個二維碼。首發于簡書博客：http://www.jianshu.com/p/e958... 2017-11-25 更新：5. 使用 Gulp 拼合圖片 1. 單個頁面內容不能過多設計常用尺寸：750 x 1334 / 640 x 1134，包含了手機頂...

madthumb 2019-08-29 13:53 評論0 收藏0