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

資訊專欄INFORMATION COLUMN

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

levinit / 3659人閱讀

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

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

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

效果：

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


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


    function FixTop(obj) {
      var obj = document.getElementById(obj);
      var objOffset = obj.offsetTop;
      //console.log("對(duì)象高度"+ objOffset);
      window.onscroll = function() {
      var bodyScrollOffset = document.body.scrollTop;
      //console.log("往下滾動(dòng)距離高度"+ bodyScrollOffset);
      var Result = objOffset - bodyScrollOffset;
      //console.log("對(duì)象減去滾動(dòng)高度"+ 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");//此處填入被固定對(duì)象的ID

效果示例：效果戳我。

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

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

相關(guān)文章

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

    摘要：滾動(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)航距...

    raise_yang 評(píng)論0 收藏0

  • vue結(jié)合preventDefault()和頁(yè)面滾動(dòng)高度計(jì)算，解決ios橡皮筋效果

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

    JerryWangSAP 評(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)書博客：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 評(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)書博客：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 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<