純 javascript 半自動(dòng)式下滑一定高度，導(dǎo)航欄固定

raise_yang 發(fā)布于2019-08-20 17:06 / 2469人閱讀

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

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

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

效果：

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

function FixTop(obj,offsettop){
  var obj = document.getElementById(obj);
  var objOffset = obj.offsetTop;
  // alert("固定對(duì)象距離頂部高度為" + objOffset);
  //去掉 alert 前面的雙斜杠，然后在頁(yè)面中刷新并向下滾動(dòng)，頁(yè)面就彈出 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);
}

效果示例：效果戳我。

當(dāng)前做法已經(jīng)不建議，建議使用最新效果：新地址

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/83403.html

相關(guān)文章

JavaScript 下滑一定高度自動(dòng)固定頂部之二（簡(jiǎn)單寫(xiě)法）

摘要：滾動(dòng)條下滑一定高度時(shí)，固定指定的導(dǎo)航條。使用方法修改中為需要固定導(dǎo)航的相應(yīng)效果當(dāng)滾動(dòng)條下滑滾動(dòng)超過(guò)導(dǎo)航欄位置時(shí)，導(dǎo)航欄固定移除原有，添加屬性并添加類(lèi)名當(dāng)滾動(dòng)條上滑高度低于原來(lái)導(dǎo)航高度時(shí)，導(dǎo)航欄變成默認(rèn)效果移除原有，添加屬性并添加類(lèi)名。滾動(dòng)條下滑一定高度時(shí)，固定指定 ID 的導(dǎo)航條。使用方法：1、修改 FixTop() 中 id 為需要固定導(dǎo)航的相應(yīng) id ；效果：當(dāng)滾動(dòng)條下滑...

levinit 2019-08-20 18:08 評(píng)論0 收藏0
前端插件庫(kù)

摘要：原文鏈接前端插件庫(kù)站點(diǎn)前端開(kāi)發(fā)文檔博客前端插件庫(kù)前端插件庫(kù)官網(wǎng)是的函數(shù)庫(kù)，目的是強(qiáng)化表格操作如搜索排序，并自動(dòng)加入組件引入表格中，使用非常靈活簡(jiǎn)便。由推出，靈活扎實(shí)的建議列表函數(shù)庫(kù)。原文鏈接：前端插件庫(kù)站點(diǎn)：前端開(kāi)發(fā)文檔博客：前端插件庫(kù) 前端插件庫(kù) DataTables 官網(wǎng)：https://www.datatables.net/ DataTables是jQuery的JavaScr...

高勝山 2019-08-26 13:44 評(píng)論0 收藏0
前端插件庫(kù)

摘要：原文鏈接前端插件庫(kù)站點(diǎn)前端開(kāi)發(fā)文檔博客前端插件庫(kù)前端插件庫(kù)官網(wǎng)是的函數(shù)庫(kù)，目的是強(qiáng)化表格操作如搜索排序，并自動(dòng)加入組件引入表格中，使用非常靈活簡(jiǎn)便。由推出，靈活扎實(shí)的建議列表函數(shù)庫(kù)。原文鏈接：前端插件庫(kù)站點(diǎn)：前端開(kāi)發(fā)文檔博客：前端插件庫(kù) 前端插件庫(kù) DataTables 官網(wǎng)：https://www.datatables.net/ DataTables是jQuery的JavaScr...

shusen 2019-08-30 10:53 評(píng)論0 收藏0
移動(dòng)端H5頁(yè)面注意事項(xiàng)

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

weknow619 2019-08-01 18:04 評(píng)論0 收藏0
移動(dòng)端H5頁(yè)面注意事項(xiàng)

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

madthumb 2019-08-29 13:53 評(píng)論0 收藏0