JS如何實現導航欄的智慧浮動
<script language=”javascript”>
function smartFloat(obj) {
var obj = document.getElementById(obj);
var top = getTop(obj);
var isIE6 = /msie 6/i.test(navigator.userAgent);
window.onscroll = function () {
var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (bodyScrollTop > top) {
obj.style.position = (isIE6) ? “absolute” : “fixed”;
obj.style.top = (isIE6) ? bodyScrollTop + “px” : “0px”;
} else {
obj.style.position = “static”;
}
}
function getTop(e) {
var offset = e.offsetTop;
if (e.offsetParent != null) offset += getTop(e.offsetParent);
return offset;
}
}
window.onload = function () {
smartFloat(“nav”);
}
</script>
****擴充套件*****
//原生JS //獲取div距離頂部的距離 var mTop = document.getElementsByClassName(`mdiv`)[0].offsetTop;
//獲取滾動條的高度 var sTop = document.body.scrollTop;
//Jquery mTop = $(`.mdiv`)[0].offsetTop; sTop = $(window).scrollTop();
$(document).scrollTop() 獲取垂直滾動的距離 即當前滾動的地方的視窗頂端到整個頁面頂端的距離
$(document).scrollLeft() 這是獲取水平滾動條的距離
相關文章
- 在 Flutter 中實現一個浮動導航欄Flutter
- CSS如何讓浮動導航欄元素居中顯示CSS
- CSS浮動float的導航欄小案例總結CSS
- JavaScript實現HTML導航欄下拉選單[懸浮顯示]JavaScriptHTML
- Tablayout實現導航欄TabLayout
- CSS_導航欄+固定浮動的回到頂部按鈕CSS
- 拖動滾動條實現側欄導航定位效果
- css3實現動態圓形導航欄CSSS3
- JavaScript滑鼠懸浮展開側欄導航JavaScript
- 安卓中如何實現滑動導航安卓
- jQuery實現吸頂動畫導航欄jQuery動畫
- 僅2步實現 拜拜 漢堡導航欄效果~ 全新底部導航互動(滑動隱藏)
- 側欄懸浮導航選單拖動滾動條可以自動定位效果
- 智慧園區地圖導航解決方案,智慧工業園區導航如何實現?地圖
- Flutter仿閒魚底部導航欄實現Flutter
- iOS 超Easy實現 漸變導航欄iOS
- 商城側欄導航效果實現詳解
- iOS逆向之分析微信導航欄實現iOS
- 移動機器人如何在陌生環境中實現智慧導航?機器人
- js實現點選導航欄使當前背景變色程式碼JS
- 【前端】javascript實現導航欄筋斗雲效果特效前端JavaScript特效
- Bootstrap 4 實現導航欄右側對齊boot
- 如何實現園區路線導航?園區樓宇地圖導航如何實現?地圖
- 頭部導航欄也是動態的,板塊裡面的內容根據頭部導航欄動態展現資料
- JS寫的二級導航欄(利用冒泡原理)JS
- 炫酷:一句程式碼實現標題欄、導航欄滑動隱藏,ByeBurger庫的使用和實現
- 快速實現底部導航欄及未讀訊息
- Android 使用BottomNavigationView實現底部導航欄AndroidNavigationView
- iOS 記一次導航欄平滑過渡的實現iOS
- Android BottomNavigationView,底部導航欄的簡單實現AndroidNavigationView
- CSS實現的側欄三級導航選單程式碼CSS
- iOS 導航欄的控制iOS
- 醫院室內定位導航,智慧醫院導診系統如何實現?
- 技術乾貨 | jsAPI 方式下的導航欄的動態化修改JSAPI
- js實現的響應式導航選單效果JS
- 安卓導航抽屜 Navigation Drawer 實現沉浸通知欄安卓Navigation
- 如何設計出優秀的 App 導航欄APP
- WordPresscategory導航欄Go