Position Sticky Pure CSS: Scroll To Top Then Fixed

Position Sticky Pure CSS – Scroll To Top Then Fixed

For a time “dynamic fixed” elements were the hot web design feature: scroll a site and everything moved as expected, but when a particular element (often a menu bar, sometimes an advertisement) reached the top of the page it would fix itself in place, while the rest of the document continued to scroll underneath it. Scroll back, and the element would reattach itself to the document.

This behavior – a dynamic hybrid between the standard position: static and position: fixed – was often added to a page with JQuery, via one of a hundred different plugins. Like many popular features, it was eventually adopted into an official specification, meaning that the effect could be achieved with native CSS, with no frameworks, scripts, or other dependencies… but in this case, the adoption process was (and continues to be) somewhat troubled.

How Things Were Meant to Be

The behavior was codified as a new CSS value: position: sticky. This, combined with a clever use of top (in the context of sticky, the distance from the top of the body at which the element will “stick” when scrolled; alternatives are left, bottom and right for scrolling in those directions) was intended to cover the range of popular use cases. The syntax, then, should be pretty simple:

#stickytest {
position: sticky;
top: 0px;
}

Applied to something like an image, the markup would be:

<img src="geckofoot.jpg" alt id="stickytest"> <p>Lorem ipsum…

If you test that code on a page with appropriate markup and content in a recent version of Firefox, it will work just fine. Moving to other browsers reveals “sticky’s” awkward position:

  1. Safari 6.1+ (on both desktop and mobile) support sticky with a vendor prefix. Somewhat unusually, the prefix is applied to the value, not the property, since it’s the former that’s new.
  2. There’s an added catch: in Safari sticky only works with elements that are display: block, so the CSS for this sticky image example becomes:
#stickytest {
display: block;
position: -webkit-sticky; position: sticky;
top: 0px;
}

In addition:

  • Placing the sticky element inside a parent that has overflow: hidden applied to it will cause the sticky behaviour to fail.
  • Officially, sticky should also work with display: table, including table cells, as it’s very useful for navigating long rows of table data while keeping column headers in view. Unfortunately, browser implementation of this feature has been lacking so far.

Chrome Travails

You’ll probably find web pages that insist Chrome has support for position: sticky as an experimental option, and that was true… until the option was removed entirely in Chrome 37. The Google development team felt that keeping position: sticky was too much of a challenge in their quest to improve composition and rendering speed in the browser, so it has been placed to one side. That means we must fallback to using a polyfill to recreate the behaviour in Chrome and Internet Explorer (which has never supported the new value).

Fortunately, there are a number of options for this: the Filament Group has a JQuery solution, along with many others; my personal favorite is Oleg Korsunsky’s stickyfill, which has the option of working with or without JQuery.

The example on the StickyFill page adds the sticky behaviour as a class, but it’s more likely to affect only one element, making an id a more logical selector. In the case of this demo, after inserting the script at the bottom of the page, I’d add:

Stickyfill.add(document.getElementById('stickytest'));

Note that top, left, bottom and right for the element is measured from the body. This will include any margin already in place on the body element.

Keep It Simple

As with all new features, position: sticky has the potential for misuse. To avoid UI disasters, I would recommend the following:

  • In theory, position: sticky can be used to fix elements inside any scrolling container, as shown in the example at the top of this page. Please don’t use sticky more than once per page: we don’t need multiple content boxes acting like clogged drains. (In addition, all the polyfills available for position: fixed fail in providing this feature; the demo for this page only works because it is inside an iframe).
  • Be very careful using position: sticky at mobile screen sizes: anything that is stuck immediately takes up screen real estate, reducing the room for your content. Make sure you’re making an element sticky because it’s required or extremely helpful to do so, not because it “looks cool”. Remember that it’s easy for users to flick-scroll to the top or bottom of most pages; don’t get in the way of that behaviour.

To provide a reasonable use of sticky elements, write a @media query that countersposition: sticky at smaller screen sizes:

@media all and (max-width: 600px) {
#stickytest {
position: static !important;
}
}

This returns the element to normal flow in the document if the viewport is 600 pixels wide or less. You’ll need to write a similar rule in JavaScript with matchMedia if you’re using a polyfill. Re-writing and adding to the script above:

var sticky = document.getElementById('stickytest');
var screencheck = window.matchMedia("(max-width: 600px)");
Stickyfill.add(sticky);
if (screencheck.matches) {
Stickyfill.remove(sticky);
}
  • As a rule, “stuck” elements should be the new cutting-off point for content. Don’t “stick” an element in the middle of a block, as having scrolling text appear both aboveand below a fixed element is very distracting, and makes the text difficult to read.
  • Similarly, try to avoid sticking elements that cut off part of a text block, forcing the user to scroll in a decreased amount of space to read a full line.
  • Ensure that the fixed element does not occupy more than the minimum expected height of the viewport. If it is taller than its container when it is “stuck”, users will never be able to see all of its content; nor are they likely to be able to read any of the other content on the page.
  • Further to this, you might want to indicate that content is truly disappearing under the stuck element: a partial transparency effect when the element is in it’s “stuck” position, such as my “frosted glass” effect, can provide a useful visual cue.

In principle, as series of elements could be provided with the same position: stickyvalue, effectively replacing each other at the chosen point on the screen as the page scrolls. While this can be effective, it’s also potentially very confusing to users, and should be employed carefully.

Unfortunately there’s no “stuck” event in JavaScript yet to report when an element has entered its fixed position; right now, you have to test for that independently. (Some polyfills add a class to stuck elements to make up for this lack).

css position sticky
css sticky
position sticky css
css sticky footer
sticky footer css
css sticky header
sticky header css
css sticky navbar
sticky position css
sticky css
sticky navbar css
sticky sidebar css
sticky menu css
sticky nav css
css sticky menu
css sticky position
css position sticky not working
sticky navbar css only
css sticky nav
css sticky table header
css sticky header on scroll
sticky note css
css sticky sidebar
css grid sticky footer
css sticky not working
sticky div css
sticky navigation css
sticky header on scroll css
sticky headers css
sticky button css
css position: sticky
position: sticky css
sticky element css
css position;sticky
css position sticky move
set right position on sticky css
css position webkit sticky invalid
css position absolute sticky
position sticky css myanimelist
css position sticky not sticking
css’s position: sticky
position sticky in css
css -webkit position sticky
position sticky css selector
firefox css position sticky
css position sticky top 0 does not work
css multiple position sticky
css position sticky medium.com
css position sticky right side
add stop position for sticky element css
position sticky view css
css position sticky browser support
position attribute css sticky
position sticky grid css
position sticky css property
css position sticky still scrolls not fixed
css position sticky body height 100
css position sticky for ie 11
css emulate position sticky
safari css position sticky
css position sticky and float
css position sticky unset initial
position sticky top css
make position absolute then sticky css
keithclark css position sticky
css position sticky internet explorer
position sticky css chrome
webkit prefix position sticky css
how to use sticky position css
css position sticky webkit
css position sticky mobile menu not scrolling
position sticky css left
css position sticky for button
firefox css position sticky issue
css position sticky w3schools
css set sticky start position
css sticky x position
css position absolute and sticky
position sticky within css grid
adjust position of sticky on page css
css overflow scroll position sticky
css position sticky mobile menu scroll
css sticky position right
how to set position of text to sticky css
css grid position sticky
css position sticky flexbox
css menu position sticky
position sticky not working css
css position:sticky auto height
css position sticky ie 11
position sticky css not working in ie11
position sticky css not working
css position sticky reverse
css position sticky scroll jump
position sticky css footer
css position sticky compatibility
css position sticky on varying height content
css position sticky top and bottom
css sticky position example
why does my sticky position css
css use sticky position in a style
css position sticky list-item
html css position sticky logo
how to make sticky position to the right css
css position webkit sticky
css div position sticky to another div
css position sticky support
position:sticky css
browser prefix for position sticky css
css position sticky thead tr
css position sticky how to hide elementh benith top menu
css check if sticky position is supported
css position sticky jumping
css position sticky dans un div
css check position sticky
css position sticky from default position
css sticky appear at scroll position
html css position sticky
css position sticky mdn
css using position sticky example
cant get css position sticky to work.
css position sticky caniuse
css position:sticky
safari css position webkit sticky
css sticky position not working chrome
sticky position change css
css position sticky example
sticky position css not working
using position sticky css
css sticky position text displays content underneath
how to position sticky with css
position sticky css compatibility
position sticky header css
css position sticky overflow
css position sticky bottom of screen
css position sticky with elements created dynamically
css position sticky polyfill
sticky bottom section css position
css position sticky header
css remove position sticky when scrolled past
css position fixed vs sticky
how position sticky css
what is position: sticky css
position: sticky css how to
css position fixed sticky
css position relative and sticky
position sticky css w3
position sticky css tricks
how to do css position sticky
css position sticky bottom
position sticky bottom css
html css position sticky not working
position sticky css bottom of screen
internet explorer sticky css position
css html sticky position
css position sticky tr
test support for css position sticky
revolution slider css position sticky
position sticky css support
position sticky css browser compatibility
css position sticky target when bottom
how to use position sticky css
css position sticky sidebar
browser css position sticky
position sticky css w3schools
absolute and sticky position css
css sticky position samples
css position sticky right
css using position sticky
html css position sticky positioning it right
css position sticky spec
css sticky position shim
css position sticky scroll
position sticky css browser compatability
css position emulate sticky
css sticky position not working
css prevent stop position sticky
css position sticky from computed position
css position sticky sideba not working
css position sticky botttom
css remove position sticky when next item sticks
css position sticky not working in chrome
what is sticky position in css
css position sticky does not work
css position sticky height
css position sticky javascript
css sticky footer position absolute
css position sticky microsoft edge
position sticky css bottom
css position sticky ie
css position sticky safari
css position sticky effect
position sticky css ie11
sticky position (bar) with css or jquery
jquery css position sticky
css position sticky jquery
css table position sticky
css position sticky js
position sticky with css grid
css position sticky z-index
css position sticky vs fixed
position sticky css polyfill
position sticky css example
position sticky css ie
sticky footer css position fixed
css position sticky table header
position sticky css mdn
css position sticky bottom 0
css position sticky jsfiddle
css position sticky horizontal scroll
css position sticky footer
css position sticky not work
css position sticky viewport
position sticky css grid
css position sticky overflow scroll

css scroll to top
scroll to top css
scroll to top of page css
scroll to top css only
scroll to top speed css
css scroll can’t scroll to top
css scroll to top not working in firefox
css mobile view scroll to top
button to scroll to top of page css
css onclick scroll to top
css smooth scroll to top
css overflow scroll to top
scroll to top code with jquery and css
css auto scroll to top
css scroll to top not working in ie
css scroll to top button
scroll to top using css
css mobile scroll doesn’t scroll to top, or bottom fast
css click link scroll to top
scroll to top of page css only
materialize css scroll to top
css div scroll to top
how to force scroll to top button slower css
css transition scroll to top
smooth scroll to top css
scroll to top element css
css scroll to top then fixed
css checked scroll to top of page
css add scroll to top
scroll to top icon css
change scroll to top divi theme css
css & html scroll to top button
css if item in view scroll to top
add speed to scroll to top of page css
scroll to top css code
pure css scroll to top
scroll to top when link clicked css
click button scroll to top css
css triangle scroll to top
change scroll to top wordpress css
scroll to top button html css generator
css tab scroll to top
html css scroll to top
speed to scroll to top of page css
icon scroll to top of page css
css page scroll to top of page width id
css window scroll to top animated
adding a scroll to top button css only
css to scroll to top
css auto scroll to top of a div
scroll to top button html css
css scroll to top wordpree
scroll to top jquery css tricks
css scroll to top animation
how to force scroll to top button to go slower css
divi scroll to top css
slow scroll to top css
smooth scroll to top css html
scroll to top button css
css javascript smooth scroll to top
css scroll to top wordpress
css scroll to top on refresh
css scroll to top transition
pure css scroll to top button
scroll to top with animation css
scroll to top animation css
scroll to top css tricks
scroll to top css html
scroll to top html css
scroll to top html5 css
css scroll to top of div
scroll to top with css
scroll to top css html5
css js scroll to top
scroll to top css button
css scroll to top link
scroll to top pure css
disappearing scroll to top link with jquery and css
css overflow-y scroll to top
scroll to top button by css
scroll to top css animation
scroll to top transition css
scroll to top button css only

4 Comments
  1. I stumbled upon this article, and it gave me the info I was looking for. Thanks.

  2. Saved as a favorite, I really like your blog!

    Leave a Comment

    Web Training Guides
    Compare items
    • Total (0)
    Compare
    0