More often than not, you see certain contents of a website floating down with you as you scroll down the page. This is an utterly useful technique if you want to emphasize certain things on a web page more than others. It is also a clean way to handle empty space on a web page.
The header bar of this web page serves as a simple example of this technique. Leading social-networking platforms such as Facebook and Twitter do the same with their navigation bar. In this case, having such a functionality aids easy navigation within the site. Other examples include that of tech media websites, which always keep a floating user activity panel prompting you to like them, tweet them, etc.
So how do you actually do it?
Refer to the floating panel on the right
The crux of this "floating" panel lies within its css positioning. We need to set the element's position to fixed, but only once it is off the screen
The problem can be broken down into two steps
- Determining when the element you want to float goes of the screen
- Setting the element's position accordingly
Let's float this
I am a Computer Engineering Student at the University of Waterloo.
I will be completing my 2nd year studies in August this year. Feel free to contact me for engineering projects, job requirements, or simply to know what's up.
For a more professional network
About anything relevant!