Search

Nalezeno "sticky": 45

Eliminating five top compatibility pain points on the web

23.4.2021
Robert Nyman and Philip Jägenstedt: Google is working with other browser vendors and industry partners to fix the top five browser compatibility pain points for web developers. The areas of focus are CSS Flexbox, CSS Grid, position: sticky,  … The post Eliminating five...

Sticky Headers: 5 Ways to Make Them Better

21.4.2021
Page Laubheimer says that if you’re going to do a sticky header… Keep it small. Visually contrast it with the rest of the page. If it’s going to move, keep it minimal. (I’d say, respect prefers-reduced-motion.) Consider “partially persistent … The post Sticky...

Creating a Smart Navbar With Vanilla JavaScript

5.4.2021
Sticky, or fixed, navigation is a popular design choice because it gives users persistent access to navigate the site. On the other hand, it takes up space on the page and sometimes covers content is a way that’s less than … The post Creating a Smart Navbar With Vanilla JavaScript appeared...

Table of Contents with IntersectionObserver

11.3.2021
If you have a table of contents on a long-scrolling page, thanks to, say, position: fixed; or position: sticky;, the IntersectionObserver API in JavaScript is the perfect companion to highlight items in the table of contents when corresponding content … The post Table of Contents with...

How to Create a Shrinking Header on Scroll Without JavaScript

16.2.2021
Imagine a header of a website that is nice and thick, with plenty of padding on top and bottom of the content. As you scroll down, it shrinks up on itself, reducing some of that padding, making more screen real … The post How to Create a Shrinking Header on Scroll Without JavaScript appeared...

A table with both a sticky header and a sticky first column

10.2.2021
We’ve covered that individual <table> cells, <th> and <td> can be position: sticky. It’s pretty easy to make the header of a table stick to the top of the screen while scrolling through a bunch or rows (like this … The post A table with both a sticky...

Teddiursa Is Always Sticky

12.12.2020
Every Pokemon is interesting and worth talking about. I don’t play a ton of Pokemon, but I do enjoy the universe and I love learning more about the creatures in it. So, Here’s Another Pokemon! It’s Teddiursa!Read more

How to Get Sticky and Full-Bleed Elements to Play Well Together

4.12.2020
I had a unique requirement the other day: to build a layout with full-bleed elements while one element stays stuck to the top. This ended up being rather tricky to pull off so I’m documenting it here in case anyone needs to re-create this same effect. Part of the trickiness was dealing with logical...

A Dynamically-Sized Sticky Sidebar with HTML and CSS

20.11.2020
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 position: sticky into your CSS ruleset, set the directional offset (e.g. top: 0) and you’re ready to impress your teammates with minimal effort....

How to Detect When a Sticky Element Gets Pinned

5.10.2020
The need for position: sticky was around for years before it was implemented natively, and I can boast that I implemented it with JavaScript and scroll events for ages. Eventually we got position: sticky, and it works well from a visual perspective, but I wondered how can we determine when...

How to Use CSS Grid for Sticky Headers and Footers

2.9.2020
CSS Grid is a collection of properties designed to make layout easier than it’s ever been. Like anything, there’s a bit of a learning curve, but Grid is honestly fun to work with once you get the hang of it. One area where it shines is dealing with headers and footers. With a little...

Stacked Cards with Sticky Positioning and a Dash of Sass

13.8.2020
The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll. I started wondering how much JavaScript this would involve and how you’d go about making it when I realized — ah! — this must be the work...

Refreshing Sidebar for 2020

3.7.2020
The new design for Sidebar is lovely. I like how it goes even deeper with the sticky elements than the last design. But even more notably, Sacha Greif has been posting five links per day to Sidebar since 2012. That’s a remarkable achievement. Direct Link to Article — Permalink…...

A “new direction” in the struggle against rightward scrolling

21.5.2020
You know those times you get a horizontal scrollbar when accidentally placing an element off the right edge of the browser window? It might be a menu that slides in or the like. Sometimes we to overflow-x: hidden; on the body to fix that, but that can sometimes wreck stuff like position:...

Indicating Scroll Position on a Page With CSS

24.3.2020
Scrolling is something we all know and do on the web to the extent that it’s an expectation or perhaps even a habit, like brushing our teeth. That’s probably why we don’t put too much thought into designing the scrolling experience — it’s a well-known basic function. In fact, the popular “there...

Solving Sticky Hover States with @media (hover: hover)

18.2.2020
Mezo Istvan does a good job of covering the problem and a solution to it in a blog post on Medium¹. If you tap on something that has a :hover state but you don't leave the page then, on a mobile device, there is a chance that :hover state "sticks." You'll see this with stuff like jump-links used...

Getting Fancy with position: sticky;

7.2.2020
Mike Solomon worked on a fancy scrollytelling post for Esquire and blogged about it. It has GIFs of each step along the way of figuring out not just position: sticky; but also using negative margins, wrapper divs, backgrounds, and even a smidge of JavaScript measuring to get it all right. What...

Sticky Table of Contents with Scrolling Active States

30.1.2020
Say you have a two-column layout: a main column with content. Say it has a lot of content, with sections that requires scrolling. And let's toss in a sidebar column that is largely empty, such that you can safely put a position: sticky; table of contents over there for all that content in the main...

Position Sticky and Table Headers

13.7.2019
You can't position: sticky; a <thead>. Nor a <tr>. But you can sticky a <th>, which means you can make sticky headers inside a regular ol' <table>. This is tricky stuff, because if you didn't know this weird quirk, it would be hard to blame you. It makes way more...

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace