A lightweight, performant, and simple-to-use wrapper component to stick section headers to the top when scrolling brings them to top

Overview

Sticky Section Header

npm version

This package exports 2 components. StickySectionHeader is a light weight simmple to use component. Just wrap your headers/section headers inside StickySectionHeader component and provide top (top position - margin from top of viewport) and viewPort (The container element, by default the browser viewport).

CollapsibleStickySectionHeader adds on to the capabilities of StickySectionHeader. (See below...)

Updates: StickySectionHeader and CollapsibleStickySectionHeader components now set an attribute stuck when header is stuck.

Installation

Install StickySectionHeader from npm registry using one of the following

yarn add @mayank1513/sticky-section-header
npm i @mayank1513/sticky-section-header
pnpm i @mayank1513/sticky-section-header

Simple usage

My Awesome Header

); }">
import { StickySectionHeader } from "@mayank1513/sticky-section-header";

export default function YourComponent() {
  return (
    

My Awesome Header

); }

Use with custom top position

My Awesome Header

); }">
import { StickySectionHeader } from "@mayank1513/sticky-section-header";

export default function YourComponent() {
  return (
    

My Awesome Header

); }

Use with custom top position and viewport

// your other stuff

My Awesome Header

); }">
import { StickySectionHeader } from "@mayank1513/sticky-section-header";
import { useRef } from "react";

export default function YourComponent() {
  const ref = useRef();
  return (
    
// your other stuff

My Awesome Header

); }

Use as waypoint

If you want to call any function when this element touches top or bottom of the viewport, you can pass in a callBack function. This funciton gets the IntersectionObserver entry as argument.

If you want to use this component only as a waypoint and not stick it, you can pass stick={false}.

CollapsibleStickySectionHeader

My Awesome Header
); }">
import { CollapsibleStickySectionHeader } from "@mayank1513/sticky-section-header";

export default function YourComponent() {
  return (
    
My Awesome Header
); }

You can also optionally pass onHeightChange function if you need to change something based on the height of the header ro the fraction expanded. It provides 2 inputs: fraction (between 0 and 1. 0 = collapsed, 1 = expanded) and height of the header.

Make sure to set height: 100% for the coponent directly inside the CollapsibleStickySectionHeader

You might also like...

Scrolling navigation component for web apps

Slinky.js Create beautiful scrolling driven navigation lists with stacking headers that remain visible at all times. Scroll around on the plugin homep

Nov 16, 2022

@nodesecure/ci brings together a set of tools to identify dependencies vulnerabilities and track most common malicious code and patterns

@nodesecure/ci brings together a set of tools to identify dependencies vulnerabilities and track most common malicious code and patterns

NodeSecure CI Action @nodesecure/ci brings together a set of tools to identify dependencies vulnerabilities and track most common malicious code and p

Jul 29, 2022

Seamless and lightweight parallax scrolling library implemented in pure JavaScript utilizing Hardware acceleration for extra performance.

parallax-vanilla.js Seamless and lightweight parallax scrolling library implemented in pure JavaScript utilizing Hardware acceleration for extra perfo

Dec 16, 2022

The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 5 support.

 The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 5 support.

bootstrap-select The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with

Dec 30, 2022

The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 5 support

The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 5 support

bootstrap-select The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with

Dec 30, 2022

D-DALLE brings together the world’s artist creativity using AI and Blockchain

D-DALLE brings together the world’s artist creativity using AI and Blockchain

D-DALLE stands for Decentralized DALL-E. This app is deployed live at ddalle.xyz on Klaytn mainnet. The AI used in this work is DALLE-2 created by OpenAI.

Nov 10, 2022

a simple wrapper nestjs dynamic module on top of surrealdb.js driver, with a consumer app to show case library in action, nothing fancy

README README Project Components Dynamic Module Consumer App Install SurrealDb Starts SurrealDb Init surrealDb Database Run App from Source Code Launc

Oct 3, 2022

A lightweight script to animate scrolling to anchor links.

DEPRECATION NOTICE: Smooth Scroll is, without a doubt, my most popular and widely used plugin. But in the time since I created it, a CSS-only method f

Dec 26, 2022
Releases(v0.0.8)
Owner
Mayank
Passionate Developer and Researcher. Coming from academic and research background, and actively involved in designing simulation tools and app development.
Mayank
A simple to do list webpage where you can log the daily tasks you have to do, mark them as checked, modify them, reorder them and remove them. Made using HTML, CSS and JavaScript.

To-Do-List This Webpage is for an app called To-Do-List which helps you add, remove or check tasks you have to do. It is a simple web page which conta

Zeeshan Haider 9 Mar 12, 2022
Modify Request & Response Headers Chrome Extension (Manifest V3)

Modify request & response headers (Chrome Extension Manifest V3) This Chrome extension will add request header and response header to few network requ

Requestly 6 Dec 9, 2022
:mechanical_leg: Tiny and performant collapse component for SolidJS.

Solid Collapse Tiny and performant collapse component for SolidJS. Demo and examples Features Pure dynamic CSS height transition, no javascript animat

Simone 12 Dec 29, 2022
Lightweight (< 2.3kB gzipped) and performant natural sorting of arrays and collections by differentiating between unicode characters, numbers, dates, etc.

fast-natural-order-by Lightweight (< 2.3kB gzipped) and performant natural sorting of arrays and collections by differentiating between unicode charac

Shelf 5 Nov 14, 2022
Mike North's "Making TypeScript Stick" course.

Mike North's "Making TypeScript Stick" course.

Mike North 24 Oct 30, 2022
🦉The jQuery plugin "Stick to me" allows you to create exit-popups on your web page, so you can capture visitors just as they are about to leave.

?? The jQuery plugin "Stick to me" allows you to create exit-popups on your web page, so you can capture visitors just as they are about to leave. How

Guilherme Assemany 18 Feb 10, 2022
This plugin allows you to stick toolbar for summernote editors.

Summernote Sticky Toolbar This is a simple plugin for Summernote that makes the toolbar sticky. preview.mp4 Installation Classic Include the plugin sc

İlyas Özkurt 6 Oct 5, 2022
There can be more than Notion and Miro. Affine is a next-gen knowledge base that brings planning, sorting and creating all together. Privacy first, open-source, customizable and ready to use.

AFFiNE.PRO The Next-Gen Knowledge Base to Replace Notion & Miro. Planning, Sorting and Creating all Together. Open-source, Privacy-First, and Free to

Toeverything 12.1k Jan 9, 2023
A simple react project that contain a single page application (SPA) And a simple caculator to make some calculation and there is a section you can see some Math quotes. Ⓜ💯

A simple react project that contain a single page application (SPA) And a simple caculator to make some calculation and there is a section you can see some Math quotes. Ⓜ??

Reem janina 7 May 31, 2022
This is a Webpack based to-do-list project. With this app, users can add thier daily routine tasks to the list, mark them as complet, edit them or delete them.

To Do List This is a Webpack based to-do-list project. With this app, users can add thier daily routine tasks to the list, mark them as complet, edit

Ali Aqa Atayee 12 Oct 30, 2022