成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

raise_yang / 2419人閱讀

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

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

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

效果：

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


當(dāng)滾動條上滑高度低于原來導(dǎo)航高度時，導(dǎo)航欄變成默認(rèn)效果(移除原有，添加「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);
}

效果示例：效果戳我。

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83403.html

相關(guān)文章

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

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

    levinit 評論0 收藏0

  • 前端插件庫

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

    高勝山 評論0 收藏0

  • 前端插件庫

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

    shusen 評論0 收藏0

  • 移動端H5頁面注意事項

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

    weknow619 評論0 收藏0

  • 移動端H5頁面注意事項

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

    madthumb 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<