A Dynamically-Sized Sticky Sidebar with HTML and CSS

By CSS-Tricks - 2020-11-20

Description

Creating page content that sticks to the viewport as you scroll, something like a jump-to-anchor menu or section headings, has never been easier. Throw a

Summary

AWS Amplify - the fastest, easiest way to develop mobile and web apps that scale.
With these two CSS properties, the sidebar element sticks to the top of the viewport with an offset to give it some breathing room.
This is unnecessary if it’s preferred that the component stretch to fill the viewport height.
And I was indeed wanting a toggle thingi on mobile like proposed in the article.

Topics

UX (0.25)
Frontend (0.14)
Backend (0.11)

Similar Articles

A Thoughtful Way To Use React’s useRef() Hook

By Smashing Magazine - 2020-11-19

In a React component, useState and useReducer can cause your component to re-render each time there is a call to the update functions. In this article, you will find out how to use the useRef() hook t ...

How to increase your rendering performance by 70% in Vue.js

By DEV Community - 2021-02-28

Hello everyone! 😜 How you are guys doing? Hope you are fine and well! So, today I will teach you ab... Tagged with todayilearned, vue, performance, functional.

A Complete Guide to Flexbox

By CSS-Tricks - 2020-12-03

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and ...