[TimLinux] JavaScript position為fixed時支援水平捲軸

標籤：ntb   實現   支援   設定   document   事件   open   patch   圖片   

1. 固定定位

position: fixed;設定好之後，元素在瀏覽器視窗中的位置就固定住了，這個時候，不論是水平移動捲軸，還是垂直移動捲軸，元素是打死都不會動的。

但是當用fixed定位的元素，作為header部分的時候，瀏覽器視窗一旦縮小了，不讓移動，那就會導致右側的導覽看不到也點不到了，比如“登入”按鈕，這個時候大家就想罵娘了，然後罵娘並沒有卵用。

2. onscroll事件

捲軸發生滾動的時候，window對象上發生了onscroll事件了。我們的方法就是，將一個函數（或者多個函數）註冊到window.onscroll事件上，當事件發生時，動態更新元素的left值來實現fixed元素的移動功能。

3. 初始狀態

當頁面首次載入的時候，瀏覽器的捲軸的位置已經偏離正常值，這個時候並不會發生滾動事件，這時候就需要在文檔準備好之後，由JavaScript代碼來觸發一次onscroll事件了。觸發事件的方法有三個步驟：

1. document.createEvent(‘Events‘)  返回一個event 對象，如：ev；
2. ev.initEvents(‘scroll‘, false, true) 初始化事件到onscroll上；
3. window.dispatchEvent(ev) 在window元素上觸發事件了。

4. 樣本

比較簡單的樣本如下：

function triggerScroll() {    var ev = document.createEvent(‘Events‘);    ev.initEvent(‘scroll‘, false, true);    window.dispatchEvent(ev);}$(document).ready = function () {    triggerScroll();  }window.onscroll = function () {    var leftWidth = document.body.scrollLeft;    var fixedElement = document.getElementById(‘fixedElement‘);    fixedElement.style.left = "-" + leftWidth + "px";}

View Code

 

[TimLinux] JavaScript position為fixed時支援水平捲軸