• This repository has been archived on 15/Dec/2018
  • Stars
    star
    1,486
  • Rank 30,386 (Top 0.7 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 10 years ago
  • Updated almost 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

DEPRECATED: A position: sticky polyfill that works with filamentgroup/fixed-fixed for a safer position:fixed fallback.

Fixed-sticky

🚨🚨 This plugin is Deprecated 🚨🚨

In our own designs we use sticky sparingly and as an enhancement, which means that fallback positioning behavior is acceptable. With native browser support for position: sticky expanding, we must weigh the diminishing cross-section of browsers that require this polyfill against this plugin’s own maintenance costs. Therefore, we’ve decided that now is the right time to retire fixed-sticky. The previous documentation can be found at v0.1.7. NPM will report a deprecation warning. If you want to maintain a fork of this package, send me a message (@zachleat on Twitter) and I’ll add a link to it below. Thank you!

Filament Group

  • ©2013 @zachleat, Filament Group
  • MIT license

Great alternatives

Native position: sticky

The most overlooked thing about position: sticky is that sticky elements are constrained to the dimensions of their parent elements. This means if a sticky element is inside of a parent container that is the same dimensions as itself, the element will not stick.

Here’s an example of what a sticky element with CSS top: 20px behaves like:

Scrolling down. The blue border represents the dimensions of the parent container element. If the element’s top is greater than 20px to the top of the viewport, the element is not sticky.

Scrolling down. When the element’s top is less than 20px to the top of the viewport, the element is sticky.

Here’s an example of what a sticky element with CSS bottom: 20px behaves like:

Scrolling up. Not sticky.

Scrolling up. Sticky.

Demos

Native position: sticky Caveats

  • Any non-default value (not visible) for overflow, overflow-x, or overflow-y on the parent element will disable position: sticky (via @davatron5000).
  • iOS (and Chrome) do not support position: sticky; with display: inline-block;.
  • This plugin (and Chrome’s implementation) does not support use with thead and tfoot.
  • Native sticky anchors to parent elements using their own overflow. This means scrolling the element fixes the sticky element to the parent dimensions. This plugin does not support overflow on parent elements.

More Repositories

1

loadCSS

Load CSS asynchronously
JavaScript
6,727
star
2

tablesaw

A group of plugins for responsive tables.
JavaScript
5,499
star
3

grunticon

A mystical CSS icon solution.
HTML
3,311
star
4

criticalCSS

Finds the Above the Fold CSS for your page, and outputs it into a file
JavaScript
1,695
star
5

Responsive-Images

NOTE: use Picturefill instead. An Experiment with Mobile-First Images that Scale Responsively & Responsibly
JavaScript
1,383
star
6

SocialCount

Unmaintained (see the README): Simple barebones project to show share counts from various social networks.
JavaScript
1,358
star
7

select-css

Cross-browser styles for consistent select element styling
CSS
1,237
star
8

glyphhanger

Your web font utility belt. It can subset web fonts. It can find unicode-ranges for you automatically. It makes julienne fries.
JavaScript
1,118
star
9

Southstreet

Filament Group's core tools & workflow for delivering rich cross-device web applications
JavaScript
1,087
star
10

responsive-carousel

A jQuery-based script for responsive carousels that work with mouse, touch, and keyboard
JavaScript
907
star
11

Overthrow

A tiny, no-frills, framework-independent, targeted overflow: auto polyfill for use in responsive design.
JavaScript
906
star
12

loadJS

A simple function for asynchronously loading JavaScript files
JavaScript
895
star
13

Ajax-Include-Pattern

An Ajax-Include Pattern for Modular Content
JavaScript
627
star
14

tappy

Retired (see README): Tappy! - a lightweight normalized tap event.
HTML
573
star
15

politespace

Politely add spaces to numeric form values to increase readability (credit card numbers, phone numbers, etc).
JavaScript
537
star
16

grunt-criticalcss

Grunt wrapper for criticalcss
JavaScript
530
star
17

enhance

A JavaScript workflow designed to progressively enhance sites in a qualified manner.
JavaScript
489
star
18

shoestring

A lightweight, simple DOM utility made to run on a tight budget.
JavaScript
441
star
19

imaging-heap

A command line tool to measure the efficiency of your responsive image markup across viewport sizes and device pixel ratios.
JavaScript
401
star
20

snapper

A CSS Snap-Points based carousel (and lightweight polyfill)
JavaScript
361
star
21

jQuery-Visualize

HTML5 canvas charts driven by HTML table elements
JavaScript
353
star
22

a-font-garde

A variety of test cases and tools for safe font-icon usage.
JavaScript
292
star
23

jQuery-UI-Date-Range-Picker

A range picker built on top of jQuery UI's Datepicker Control
JavaScript
272
star
24

X-rayHTML

A little something to help build documentation pages.
JavaScript
260
star
25

AppendAround

A pattern for responsive markup
JavaScript
236
star
26

jqm-pagination

jQuery Mobile Pagination for touch, mouse, and keyboard
JavaScript
214
star
27

jQuery-Equal-Heights

This repository is unmaintained. Please see the included readme for more information.
JavaScript
206
star
28

formcore

A set of forms.
HTML
205
star
29

font-loading

Research on fonts
HTML
193
star
30

quickconcat

a simple dynamic concatenator for html, css, and js files, written in php
PHP
182
star
31

fixed-fixed

CSS position:fixed qualifier.
HTML
179
star
32

RWD-Nav-Patterns

Experimental navigation structure and behavior patterns based on progressive enhancement and responsive web design.
CSS
146
star
33

jQuery-Custom-File-Input

CSS-Friendly File Input
JavaScript
132
star
34

svg-to-png

Turn a folder full of SVGs into PNGs!
JavaScript
125
star
35

layersnap

Build SVG transitions simply and declaratively
JavaScript
110
star
36

woff2-feature-test

A simple feature test for the WOFF2 font format
JavaScript
107
star
37

RWD-Table-Patterns

This repository has been retired. Please see the readme below for more information.
JavaScript
105
star
38

EnhanceJS

Are you looking for the new "Enhance"? Try here https://github.com/filamentgroup/enhance
JavaScript
105
star
39

scoped-media-query

An element query workaround. A Sass mixin for scoping CSS styles to apply only within given selector/media query pairs.
SCSS
104
star
40

html-video-responsive

Explainer repo for a proposal to improve the responsive capabilities of the HTML video element
100
star
41

jQuery-File-Download

One issue we have not yet seen addressed is the Ajax’s inability to receive a response in any form but text. Since it is now common for web applications to offer options for exporting your data in desktop app formats — such as .doc or .xls — we wrote a jQuery plugin to facilitate requests from the front end that result in a file for download. The plugin does not actually use Ajax, but its syntax follows the conventions of jQuery's native Ajax functions, making it a natural addition to our jQuery toolset.
JavaScript
98
star
42

faux-pas

A script to highlight elements that are mismatched incorrectly to @​font-face blocks, which may result in shoddy faux bold or faux italic rendering.
HTML
97
star
43

enlarge

zoom a photo
JavaScript
91
star
44

cookie

Get, set, forget cookies!
JavaScript
91
star
45

elementary

A CSS workflow for mimicking element queries
JavaScript
87
star
46

porthole

Activate stuff when it's in the viewport
JavaScript
86
star
47

jQuery-Menu

Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready
CSS
83
star
48

collapsible

Toggle your collapsible content
JavaScript
81
star
49

dialog

Just a simple, minimal jQuery dialog with typical interactivity
JavaScript
80
star
50

jQuery-Preload-CSS-Images

A solution that automates the age-old task of preloading images in web applications.
JavaScript
75
star
51

fg-modal

A modal web component
JavaScript
71
star
52

grumpicon

Grunticon Web App.
JavaScript
71
star
53

gulpicon

A gulp task wrapper for grunticon-lib.
Handlebars
67
star
54

jQuery-Custom-Input

Accessible, custom designed checkbox and radio button inputs styled with CSS (and a dash of jQuery)
HTML
63
star
55

checkboxradio

jQuery Plugin for progressively enhanced radio buttons and checkboxes
JavaScript
54
star
56

select

Minimally custom-styled select element
CSS
53
star
57

Revolver

A 360° panoramic photo viewer
JavaScript
50
star
58

resizeasaurus

A little utility to add resizing behavior to test intrinsically sized responsive components.
HTML
49
star
59

jQuery-Pixel-Em-Converter

jQuery Plugin for Retaining Scalable Interfaces with Pixel-to-Em Conversion
JavaScript
48
star
60

jQuery-Mobile-FixedToolbar-Legacy-Polyfill

Brings jQM Fixed Toolbar support to browsers that don't natively support position:fixed (like iOS4)
HTML
43
star
61

grunticon-lib

Stand-alone library for Grunticon
JavaScript
42
star
62

cq

A minimal container query web component
JavaScript
39
star
63

Overthrow-Sidescroller

The Sidescroller extension for Overthrow
JavaScript
37
star
64

jQuery-Mobile-Themed-DatePicker

This is jQuery UI's datepicker plugin with jQuery Mobile's theming and script handling applied.
HTML
36
star
65

auto-complete

A very small auto-complete component.
JavaScript
36
star
66

jQuery-Tree-Control

An accessible HTML tree component
JavaScript
34
star
67

anims

Just some CSS utilities for build and loop animations.
CSS
34
star
68

jQuery-Slider

Accessible, custom slider widget based on a standard HTML select
JavaScript
34
star
69

directory-encoder

Takes a directory of images, turns it into some CSS.
JavaScript
33
star
70

Accessible-jQuery-Tabs

A simple jQuery plugin for accessible tabs widget
HTML
30
star
71

face-off

This repository has been retired. Please see the readme below for more information.
HTML
29
star
72

Heart.js

A lightweight “ticker” plugin.
HTML
28
star
73

tau

Tau is a small and simple 360° gallery
JavaScript
26
star
74

Menu

jQuery Plugin for progressively enhanced menus
JavaScript
26
star
75

jQuery-Collapsible-Content

An accessible collapsible content panel plugin
JavaScript
25
star
76

directory-colorfy

Turn a folder of SVGs into a different color, quickly!
JavaScript
24
star
77

script-media-query

An @media (script) polyfill experiment
JavaScript
21
star
78

fg-carousel

An accessible carousel web component
JavaScript
18
star
79

Details

JavaScript
17
star
80

iconoclash

A workflow for configurable external svg sets.
JavaScript
12
star
81

iframe-caching

HTML
12
star
82

marquee

HTML
11
star
83

creditable

Utilities for working with credit card form input.
JavaScript
11
star
84

postcss-media-query-optimizer

A postcss plugin that will optimize your media queries.
JavaScript
10
star
85

servers-workers

Service Worker examples to be used at the CDN level.
JavaScript
9
star
86

component

just our typical auto enhance-able component skeleton
JavaScript
9
star
87

jqm-mail

An experimental responsive web app layout using jQuery Mobile controls
HTML
8
star
88

fg-collapse

An accessible collapsible web component
JavaScript
8
star
89

getmeta

get a meta tag's value by its name
JavaScript
8
star
90

3D-feature-test

Using progressive enhancement to apply 3D flip animation only to capable browsers
CSS
7
star
91

node-faux-pas

A command line utility to test a URL for faux web font rendering and mismatched web font code.
JavaScript
7
star
92

wc-experiments

web components and such
JavaScript
6
star
93

pym

A lightweight zoom library
JavaScript
4
star
94

validator

Form validation goodies
JavaScript
4
star
95

toss

A JavaScript function that scrolls any overflow container to a set of coordinates using an animated duration.
JavaScript
3
star
96

Trunca-

JavaScript
2
star
97

demo-head

Header for demo pages
CSS
2
star
98

compare-embed

HTML
1
star
99

flex-luthor

A small wrapper library to help with responsive intrinsic-sized Flexbox layouts that wrap based on content and container width and avoiding viewport-based media queries.
Nunjucks
1
star