Fixed with absolute

TwIStOy 发布于2019-08-26 11:52 / 1165人阅读

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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