Fixed with absolute

TwIStOy 發布于2019-08-26 11:52 / 1164人閱讀

A few concepts

offsetWidth: gives you the width the element takes up in pixels.

offsetHeight: gives you the height the element takes up in pixels.

clientWidth: gives you the size of the space inside the element, ignoring border width.

clientHeight: gives you the size of the space inside the element, ignoring border height.

pageXOffset: returns the number of pixels scrolled along the horizontal axis (left and right).

pageYOffset: returns the number of pixels the document is currently scrolled along the vertical axis, with a value of 0.0 indicating that the top edge of the Document is currently aligned with the top edge of the window"s content area.

getBoundingClientRect: returns an object with top, bottom, left, and right properties, indicating the pixel positions of the sides of the element relative to the top left of the viewport. If you want them relative to the whole document, you must add the current scroll position, which you can find in the pageXOffset and pageYOffset bindings.

innerWidth: width (in pixels) of the browser window viewport including, if rendered, the vertical scrollbar.

innerHeight: height (in pixels) of the browser window viewport including, if rendered, the horizontal scrollbar.

scrollWidth: a measurement of the width of an element"s content, including content not visible on the screen due to overflow.

scrollHeight: a measurement of the height of an element"s content, including content not visible on the screen due to overflow.

Practice

Let"s put together the above concepts to achieve fixed position effect with absolute position, as well as scrolling progress functionality.

// fixed.html



    
    
    
    Fixed
    


     Hello World 
    horizontal: 0
    vertical: 0

Code Sample

Reference

Eloquent JavaScript

Notice

If you want to follow the latest news/articles for the series of reading notes, Please 「Watch」to Subscribe.

GPU云服務器云服務器 absoluted absolute fixed position:absolute

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107716.html

Fixed with absolute

A few concepts offsetWidth: gives you the width the element takes up in pixels. offsetHeight: gives you the height the element takes up in pixels. clientWidth: gives you the size of the space insi...

wh469012917 2019-08-29 15:15 評論0 收藏0
【代碼筆記】Web-CSS-CSS Positioning

摘要：因為圖像元素設置了屬性值為所以它會顯示在文字之后。參考資料菜鳥教程一，效果圖。二，代碼。 DOCTYPE html> CSS Positioning p.pos_fixed { position: fixed; top: 30px; right: 5px; } ...

番茄西紅柿 2019-04-23 11:51 評論0 收藏0
CSS > CSS3 中的層疊上下文初探

摘要：但該盒不建立新的層疊上下文，除非是根元素。以上是基于的層疊上下文介紹。同級情況下，按照二者在源代碼中的順序，居后的又重新占領高地了。現在我們看以下源代碼這個時候，以視口為包含塊進行定位和大小計算，將會鋪滿整個屏幕。前言：關于層疊上下文，筆者還沒有去閱讀更詳細的 W3C 規范來了解更本質的原理（表打我，等我校招拿到 offer 了我就讀好伐 T_T）。一直聽說 CSS3 里的層疊上下文...

pcChao 2019-08-28 18:18 評論0 收藏0
移動端 Modal 組件開發雜談

摘要：網上谷歌一下滾動穿透關鍵字其實可以發現很多種解決方案，每個方案也各有優缺點，但我們選擇的解決方案是團隊的一姐一篇移動端體驗優化的博文中得到的啟示博文地址花式提升移動端交互體驗。 Vant 是有贊開發的一套基于 Vue 2.0 的 Mobile 組件庫，在開發的過程中也踩了很多坑，今天我們就來聊一聊開發一個移動端 Modal 組件（在有贊該組件被稱為 Popup ）需要注意的一些坑。在...

learn_shifeng 2019-08-22 11:22 評論0 收藏0
Issues with position fixed & scroll（移動端 fixed

摘要：同時，請在其他移動端瀏覽器也這么處理，不要只對蘋果做這些處理。蘋果對于虎頭蛇尾的做法真讓人頭疼，這作風跟巨硬真像。轉載請注明英文原文及譯文出處原文地址：Issues with position fixed & scrolling on iOS 原文作者：Remy Sharp譯文地址：移動端 fixed 和 scroll 問題譯文作者：鎏金圣手火麒麟最近在做iOS端的H5頁面...

Jiavan 2019-08-21 17:00 評論0 收藏0