position: fixed 水平滾動定位

position: fixed是一個非常強大的功能,能夠將元素按照當前窗口綁定,尤其是用在header的定位上


但是,當縮小瀏覽器的時候,這個方案就會出現問題,例如,如果header有寬度,右側是個人用戶信息,當瀏覽器縮小,出現水平滾動條的時候,個人用戶信息就會看不見(隨着移動定位,超出顯示範圍)

因此,需要在水平滾動的時候,讓header出現absolute 的效果

代碼如下:

// header 水平滾動 absolute效果
window.οnscrοll=function(){
    var sl=-Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
    document.getElementById('fixed').style.left=sl+'px';
}


發佈了37 篇原創文章 · 獲贊 16 · 訪問量 20萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章