Not sure if this is going to be much of a demo; it might be more of a quick reference guide to checking the values of the position and/or size of an object on a page, and to manipulating these values on demand.
We have some text with a max-width on it; we have an figure/image combo that starts off as a centered block element. Then we float it into the text when there's enough space to support it. Fairly basic responsive effect.
This is block number one!
Architecto ex dolorum vel et et porro non. Placeat libero reiciendis consequatur et. Quis illo eos saepe quaerat. Eligendi perferendis itaque cupiditate soluta repellat ut voluptatem qui.
Basically the same thing as above except the div we're targeting is the child of a relatively positioned container div. That sets off some of our offsets. Ha ha.
This is the second block. This is inside a relatively positioned container element.
Architecto ex dolorum vel et et porro non. Placeat libero reiciendis consequatur et. Quis illo eos saepe quaerat. Eligendi perferendis itaque cupiditate soluta repellat ut voluptatem qui. Itaque iure quo voluptas possimus sunt optio ut. Quasi facere rem exercitationem et dolores. Mollitia nobis alias pariatur eum impedit. Qui soluta id quos repellat et atque.
Back to our basic flow content: what can we calculate given the numbers we have available to us?
This is block number three! We're going to calculate a few more things to see what we can do with the numbers we have on hand.
Architecto ex dolorum vel et et porro non. Placeat libero reiciendis consequatur et. Quis illo eos saepe quaerat. Eligendi perferendis itaque cupiditate soluta repellat ut voluptatem qui.
Well, sure! This does help simplify some things.
I've also prepped a dynamic on-scroll demo of these results.
This is block number four, which we're going to investigate using Element.getBoundingClientRect().
Architecto ex dolorum vel et et porro non. Placeat libero reiciendis consequatur et. Quis illo eos saepe quaerat. Eligendi perferendis itaque cupiditate soluta repellat ut voluptatem qui.
I've prepped a dynamic on-scroll demo of these results.
For right now all it's really doing is checking to see if the item is completely visible, and then making it to tricks when it is. But the numbers can be broken down further to do more nuanced things, which I'll maybe take up in separate demo sheets.
I just need a bunch of empty nonsense down here so I can scroll things off the top of the page if needed.
Quidem et quos voluptate dolor quo a. Nam omnis quia ipsa sint odit harum quas. Sunt delectus dolores voluptatibus est. Non in autem corporis neque est.
Aut vitae qui sit. Esse nobis quasi atque dolorem modi. Sed soluta neque necessitatibus ea aut eum. Minus consequatur dignissimos impedit ut nemo eligendi facere. Sint et enim totam.
Animi minus quo asperiores quae aliquid nisi voluptate. Qui qui perspiciatis provident ut doloribus laboriosam ex. Atque ducimus consequatur nostrum explicabo eaque consectetur voluptatem. Autem qui ipsam et exercitationem ex fugit.
Voluptatibus odio facere aspernatur quia tenetur voluptatum ut non. Cum eveniet sapiente repellendus consequatur excepturi saepe ad. Eum consequatur cum tenetur optio.
Atque pariatur quod nobis veritatis qui vel voluptatem et. Sunt qui qui ut saepe ea ut. Natus deserunt voluptatem exercitationem facere. Consequatur cumque atque ratione. Officiis quos incidunt aut aliquam dolorem autem repudiandae dolores.
Footer Content
Window size:
Doc scroll (y position):
Offsets of the first text block above:
Doc scroll (y position):
Offsets of the second text block above:
Window size:
Doc scroll (y position):
Offsets of the first text block above:
dElTopWindowTop:
The offsetTop of the div minus the docscroll offset. Or, the total offset of the div minus all the pixels we can't see above the top edge of the window.
This number will be positive and less than the window height if the top is in the window. It will be greater than the window height if it is below the bottom of the window, and negative if it is above the top of the window.
dElTopWindowBottom:
This is the offset from the top of the window, subtracted from the inner height of the window. This is the distance between the top of the div and the bottom of the window.
This number will be positive and less than the window height if the top is in the window. It will be negative if the top of the element is below the bottom of the window, and greater than the height of the window if it is above the top of the window.
dElBottomWindowTop:
This is dElTopWindowTop plus the innerHeight of the element.
This number will be negative if the bottom of the element is above the top of the window.
dElBottomWindowBottom:
This is the dElBottomwindowTop subtracted from the window height.
This number will be negative if the bottom of the element is below the bottom of the window.
Is it visible?
For the element to be visible, either the top or the bottom need to be visible in the window. So dElTopWindowTop needs to be positive and less than the window height, or, dElBottomWindowBottom needs to be positive and less than the window height.
Is it visible?
For the element to be even remotely visible, either the top or the bottom need to be visible in the window. So top needs to positive and less than the window height, or, bottom needs to be positive and less than the window height.