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浮動float的導航欄小案例總結CSS
- JavaScript實現HTML導航欄下拉選單[懸浮顯示]JavaScriptHTML
- jQuery實現吸頂動畫導航欄jQuery動畫
- JavaScript滑鼠懸浮展開側欄導航JavaScript
- Android 使用BottomNavigationView實現底部導航欄AndroidNavigationView
- 僅2步實現 拜拜 漢堡導航欄效果~ 全新底部導航互動(滑動隱藏)
- 智慧園區地圖導航解決方案,智慧工業園區導航如何實現?地圖
- Flutter仿閒魚底部導航欄實現Flutter
- 滑鼠懸浮導航欄背景和字型變色效果
- 移動機器人如何在陌生環境中實現智慧導航?機器人
- JS寫的二級導航欄(利用冒泡原理)JS
- 【前端】javascript實現導航欄筋斗雲效果特效前端JavaScript特效
- Bootstrap 4 實現導航欄右側對齊boot
- 頭部導航欄也是動態的,板塊裡面的內容根據頭部導航欄動態展現資料
- 如何實現園區路線導航?園區樓宇地圖導航如何實現?地圖
- 快速實現底部導航欄及未讀訊息
- iOS 記一次導航欄平滑過渡的實現iOS
- 醫院室內定位導航,智慧醫院導診系統如何實現?
- 安卓導航抽屜 Navigation Drawer 實現沉浸通知欄安卓Navigation
- Flutter 導航欄AppBarFlutterAPP
- (iOS)從0到Double系列 如何刻出一個可拖動的導航浮動按鈕iOS
- 如何在技術上實現室內導航?室內地圖導航怎麼實現?地圖
- android 自定義狀態列和導航欄分析與實現Android
- 直播系統搭建,Android使用RadioGroup+RadioButton實現導航欄Android
- qml 導航欄TabBar 工具欄ToolBartabBar
- 產業園區智慧化導航地圖開發平臺,如何實現園區內地圖導航?產業地圖
- 導航欄的隱藏問題
- HTML橫向導航欄HTML
- uniapp自定義導航欄APP
- GitHub 導航欄加強Github
- bootstrap導航欄學習boot
- 根據瀏覽器的滑動條 固定導航欄瀏覽器
- Ubuntu 20.04 自動隱藏左側導航欄Ubuntu
- day77:luffy:導航欄的實現&DjangoRestFramework JWT&多條件登入DjangoRESTFrameworkJWT
- 導航欄實現移入後彈出左右伸縮的過渡(css3)CSSS3
- UE4 如何關閉自動更新導航,手動更新導航
- AR 導航的幾種實現思路