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

levinit 發布于2019-08-20 18:08 / 3655人閱讀

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

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

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

效果：

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

當滾動條上滑高度低于原來導航高度時，導航欄變成默認效果(移除原有，添加「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

效果示例：效果戳我。

云服務器 GPU云服務器 html設置頂部高度固定頁面頂部 js中距離頂部的高度 js導航固定在頂部

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

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

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

摘要：滾動條下滑一定高度時，固定指定的導航條。固定對象距離頂部高度為去掉前面的雙斜杠，然后在頁面中刷新并向下滾動，頁面就彈出的高度。效果示例效果戳我。當前做法已經不建議，建議使用最新效果新地址滾動條下滑一定高度時，固定指定 ID 的導航條。使用方法：1、修改 FixTop() 中 id 為需要固定導航的相應 id ；2、修改 FixTop() 中 offsettop 為需要固定對象導航距...

raise_yang 2019-08-20 17:06 評論0 收藏0
vue結合preventDefault()和頁面滾動高度計算，解決ios橡皮筋效果

摘要：第一種方法我嘗試了，覺得不是很好用，而且頁面的滑動變得卡頓，橡皮筋效果還是時而出現，因此考慮第二種辦法。由上面的定義可知，當頁面滑動到頂部時，為，當頁面出現橡皮筋時，小于當頁面滑動到底部時，。感謝的啟發，方法很有用！好幾個月以前，我寫了一個類似于自動回復那種的客服頁面，嵌入到公司開發的app里。上周測試突然找到我，說頁面在滑動的時候，輸入框也會跟著上下滑動，而這個...

JerryWangSAP 2019-08-23 14:09 評論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