成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

Fixed with absolute

TwIStOy / 1174人閱讀

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.

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/107716.html

相關(guān)文章

  • 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 評(píng)論0 收藏0

  • 【代碼筆記】Web-CSS-CSS Positioning

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

    番茄西紅柿 評(píng)論0 收藏0

  • CSS > CSS3 中的層疊上下文初探

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

    pcChao 評(píng)論0 收藏0

  • 移動(dòng)端 Modal 組件開(kāi)發(fā)雜談

    摘要：網(wǎng)上谷歌一下滾動(dòng)穿透關(guān)鍵字其實(shí)可以發(fā)現(xiàn)很多種解決方案，每個(gè)方案也各有優(yōu)缺點(diǎn)，但我們選擇的解決方案是團(tuán)隊(duì)的一姐一篇移動(dòng)端體驗(yàn)優(yōu)化的博文中得到的啟示博文地址花式提升移動(dòng)端交互體驗(yàn)。 Vant 是有贊開(kāi)發(fā)的一套基于 Vue 2.0 的 Mobile 組件庫(kù)，在開(kāi)發(fā)的過(guò)程中也踩了很多坑，今天我們就來(lái)聊一聊開(kāi)發(fā)一個(gè)移動(dòng)端 Modal 組件（在有贊該組件被稱(chēng)為 Popup ）需要注意的一些坑。 在...

    learn_shifeng 評(píng)論0 收藏0

  • Issues with position fixed & scroll（移動(dòng)端 fixed

    摘要：同時(shí)，請(qǐng)?jiān)谄渌苿?dòng)端瀏覽器也這么處理，不要只對(duì)蘋(píng)果做這些處理。蘋(píng)果對(duì)于虎頭蛇尾的做法真讓人頭疼，這作風(fēng)跟巨硬真像。 轉(zhuǎn)載請(qǐng)注明英文原文及譯文出處 原文地址：Issues with position fixed & scrolling on iOS 原文作者：Remy Sharp譯文地址：移動(dòng)端 fixed 和 scroll 問(wèn)題 譯文作者：鎏金圣手火麒麟 最近在做iOS端的H5頁(yè)面...

    Jiavan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<