scrolldir - 0 dependency JS plugin to leverage scroll direction with CSS ⬆⬇ 🔌💉

  •        17

0 dependency JS plugin to leverage scroll direction with CSS ⬆⬇ 🔌💉



Related Projects

stickybits - Stickybits is a lightweight alternative to `position: sticky` polyfills 🍬

  •    Javascript

Stickybits is a lightweight alternative to position: sticky polyfills. It works perfectly for things like sticky headers. Key Note: Stickybits expects and works best when the element that will become sticky is wrapped within a parent element that defines when the element starts being sticky and stops being sticky. See below for visual reference.

floatThead - fixed <thead>. Doesn't need any custom css/html. Does what position:sticky can't

  •    Javascript

Float the table header on scroll. No changes to your HTML/CSS are required, it just works. Supports floating the header while scrolling within the window or while scrolling within a container with overflow. Supports responsive tables. .!jquery.floatthead . .

react-sticky - <Sticky /> component for awesome React apps

  •    Javascript

There's a CSS alternative to react-sticky: the position: sticky feature. However it currently does not have full browser support, specifically a lack of IE11 support and some bugs with table elements. Before using react-sticky, check to see if the browser support and restrictions prevent you from using position: sticky, as CSS will always be faster and more durable than a JS implementation. The goal of react-sticky is make it easier for developers to build UIs that have sticky elements. Some examples include a sticky navbar, or a two-column layout where the left side sticks while the right side scrolls.

sticky - jQuery Plugin for Sticky Objects

  •    Javascript

Sticky is a jQuery plugin that gives you the ability to make any element on your page always stay visible. Edit your css to position the elements (check the examples in example-*.html).

StickyTableHeaders - A jQuery plugin that makes large tables more usable by having the table header stick to the top of the screen when scrolling

  •    Javascript

So what's it good for? Well, let's say you want to display a long list of fairly uniform tabluar data, like stock exchange listings or sport statistics but you don't want your users to get lost in the data as they scroll down on the page. StickyTableHeaders to the rescue: By applying the StickyTableHeaders jQuery plugin to the table, the column headers will stick to the top of the viewport as you scroll down.

sticky-pagination-fixer - Does your site have a sticky header? You should use this script to fix keyboard-based pagination events

  •    CSS

##Sticky headers are super annoying for spacebar paginators. Because sticky headers effectively change the height of the viewport without telling the browser.

react-native-parallax-scroll-view - A ScrollView-like component with parallax and sticky header support

  •    Javascript

Note: For React Native 0.19.0 and earlier, you'll want to use react-native-parallax-scroll-view@0.17.4. Version 0.18.0 changes the scrolling API to be compatible with React Native 0.20.0. Please refer to the ListView example provided to see how ParallaxScrollView can be used in combination with ListView.

sticky-headers-recyclerview - [UNMAINTAINED] Sticky Headers decorator for Android's RecyclerView

  •    Java

This decorator allows you to easily create section headers for RecyclerViews using a LinearLayoutManager in either vertical or horizontal orientation. Credit to Emil Sjölander for creating StickyListHeaders, a library that many of us relied on for sticky headers in our listviews.

StickyScrollViewItems - A small android library for tagging views inside a ScrollView as "sticky" making them stick to the top of the scroll container until a new sticky view comes and takes it's place

  •    Java

StickyScrollViewItems is a ScrollView subclass that allowed you to mark items inside the ScrollView as sticky. The items marked as sticky will stick to the top of the ScrollView until another sticky items comes by and pushes it out of the way. Add the following gradle dependency exchanging x.x.x for the latest release.

sticky-kit - A jQuery plugin for creating smart sticky elements

  •    CoffeeScript

A jQuery plugin for making smart sticky elements. Are you having trouble getting something to work? Consult the troubleshooting guide.

StickyHeaderView - A simple sticky header view implement.

  •    Java

A simple sticky header view implement. Add scroll listener to the recyclerView, according the recyclerView's scroll distance to stick the sticky header view.

headhesive.js - An on-demand sticky header.

  •    Javascript

An on-demand sticky header. Headhesive.js creates an on-demand sticky header. Specify when you want your header to become fixed and the rest is magic. View demo.

ScrollTrigger - Triggers classes on html elements based on the scroll position

  •    Javascript

Triggers classes on html elements based on the scroll position. It makes use of requestAnimationFrame so it doesn't jack the users scroll, that way the user / browser keeps their original scroll behaviour. Animations run when the browser is ready for it. The init call takes 3 parameters, the first is a default set of options. The last two are the bindTo and scrollIn parameters. These are optional.

react-native-ultimate-listview - A high performance FlatList providing customised pull-to-refresh | auto-pagination & infinite-scrolling | gridview layout | swipeable-row

  •    Javascript

This module supports both of iOS and Android platforms. Know Issue (v3.3.0): On Android, if you are using CustomRefreshView, and the total hight of your first load data is less than your device height, then the RefreshView may still sticky on the top. However, if the data you loaded is beyond your screen, everything's fine. This issue only happen on Android, any PR is welcome.

iNoBounce - Stop your iOS webapp from bouncing around when scrolling

  •    Javascript

You've built a nice full-screen mobile webapp, complete with scrollable elements using the -webkit-overflow-scrolling property. Everything is great, however, when you scroll to the top or bottom of your scrollable element, the window exhibits rubber band-like behavior, revealing a gray tweed pattern. Sometimes, your scrollable element doesn't scroll at all, but the window still insists on bouncing around. No dependencies, no configuration, just include iNoBounce.

CustomCollectionViewLayout - Custom layout for a collection view using horizontal and vertical scrolling with sticky rows and columns

  •    Swift

Custom layout for a collection view using horizontal and vertical scrolling with sticky rows and columns Written in both Swift and Objective-C. Full example added in Swift.

jQuery-Stickem - Make items sticky as you scroll, to a point.

  •    Javascript

Make items sticky as you scroll, to a point.

HeaderListView - Android ListView with sticky headers

  •    Java

HeaderListView is deprecated. No new development will be taking place. HeaderListView is a list view with sections and with a cool iOS-like "sticky" section headers. Notice that HeaderListView is not a subclass of Android's ListView but uses composition. Hence, you will need to call getListView() to access the underlying ListView.

react-stickynode - A performant and comprehensive React sticky component.

  •    Javascript

A performant and comprehensive React sticky component.A sticky component wraps a sticky target and remains the target in viewport as an user scrolls the page. Most sticky components handle the case where the sticky target is shorter then viewport, but not the case where a sticky target taller then viewport. The reason is the behavior expectation and implementation is much more complicated.

basicScroll - Standalone parallax scrolling for mobile and desktop with CSS variables.

  •    Javascript

Standalone parallax scrolling for mobile and desktop with CSS variables. basicScroll allows you to change CSS variables depending on the scroll position. Use the variables directly in your CSS to animate whatever you want. Highly inspired by skrollr and Reactive Animations with CSS Variables.

We have large collection of open source products. Follow the tags from Tag Cloud >>

Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.