Simple sticky side with js that can use in frameworks like vue and react

Overview

js sticky side

simple sticky side with js that can use in frameworks like vue and react.

sticky side with javascript

notes

  • it can be used just in flexbox grids.
  • target element should be parent flexbox and it should have just one child.
  • the child should not have bottom margin.

how to use

install it with this command.

npm i js-sticky-side

import that in your code.

import { sticky } from "js-sticky-side"

create object and use it

var stickySide = new sticky(parentElement, int topOffest, int bottomOffset, int screenWith);

  • parentElement : the parent element that should be flexbox
  • topOffest : sticky child space to top (default 0)
  • bottomOffset : sticky child space to bottom (default 0)
  • screenWith : minimum screen size that sticky should be active (default 0)

example

var stickySide = new sticky(document.querySelector("#sticky-parent"), 80, 20, 768);

window.addEventListener("scroll", stFunction);

function stFunction() {
  stickySide.sticky();
}
You might also like...
Notes app originally made using Vue, re-made completely using React
Notes app originally made using Vue, re-made completely using React

Notes Mini Notes app originally made using Vue, re-made completely using React! Made using - React (18) - Main framework/library Typescript - Language

Assignment of Milestone 11 (Client Side) , Making an Website (Travel Related) using Firebase Authentication, Node, Express, MongoDB , Heroku, React Router, JavaScript (ES6) & React Bootstrap Etc.
Assignment of Milestone 11 (Client Side) , Making an Website (Travel Related) using Firebase Authentication, Node, Express, MongoDB , Heroku, React Router, JavaScript (ES6) & React Bootstrap Etc.

Simple Site of 'Travel Related Service' (Holiday Dreams) - Assignment (Milestone - 11) This Repo is for 'Client Side' This Assignment is mainly on Nod

Weaver - IBAX Network offers a polished development tool Weaver to develop DApps for ecoLibs (side chains)

Weaver Provide the user interface for ibax. Provide the IDE for App development.

An opensource platform to connect with awesome collaborators to work with your side-projects✨
An opensource platform to connect with awesome collaborators to work with your side-projects✨

ProStack 📑 An open-source platform 💻 to peep into some highly interesting and exciting projects & connect with those project's owner for collaborati

Shopping-cart - Simple shopping cart prototype which shows how React components and Redux can be used to build a friendly user experience
Math magicians is a website for all fans of mathematics which you can make simple calculations. Built with React.

Math Magicians is a website for all fans of mathematics which you can make simple calculations. Built with React.

Todooo is a simple mobile application where you can save your tasks.
Todooo is a simple mobile application where you can save your tasks.

Todooo is a simple mobile application where you can save your tasks. I made that app, because I wanted to try something new and the choice were React Native.

A simple Search Bar App to fetch Image from Unsplash API and display them in a Pinterest like style
A simple Search Bar App to fetch Image from Unsplash API and display them in a Pinterest like style

A Pinterest Like Training App in React. A simple Search Bar App to fetch Image from Unsplash API and display them in a Pinterest like style. Getting S

A Collabration Web-App using Express, React and Socket.io where Mutiple People can Join a Private room and Chat, Draw Among themselves. This project was selected as one of the best project at Tinkerhub Hacknight

A Collabration Web-App using Express, React and Socket.io where Mutiple People can Join a Private room and Chat, Draw Among themselves. This project was selected as one of the best project at Tinkerhub Hacknight

Owner
milad nazari
full stack web programmer
milad nazari
TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

TryShape 148 Dec 26, 2022
A Whatsapp Clone which built with reactJS. You can sign in with your Google Account and you can chat in real time.

Whatsapp Clone with ReactJS In this app you can create a simple chat room and send messages to each other using our google accounts in the room. Whats

Mert Çankaya 10 Nov 13, 2022
A Disney+ Clone that you can sign in with your Google AccountA Disney+ Clone that you can sign in with your Google Account

Disney+ Clone with ReactJS A Disney+ Clone that you can sign in with your Google Account. Click demo to try it by yourself! Disney+ Clone Demo Link Yo

Yusuf İşbilir 14 Jun 30, 2022
This is memories application developed using React JS,mongo DB .We can perform CRUD operation in this app like create post,read post,make changes in previously posted post as well as delete post.

Memories Front end - React,javascript,html,css Back end- NODE JS Application - This is memory application and it is a simple social media app that all

Gauri Kale 1 Jul 30, 2022
React Query for Firestore, that you can actually use in production, on every screen.

React Query + Firestore const { data } = useDocument('users/fernando') It's that easy. ?? This library provides the hooks you need for querying Firest

Amine Bl 96 Nov 27, 2022
Pckd is a free-to-use URL Shortener, that can be easily self-hosted

The most ⚡️ analytics-intensive self-hostable URL shortener, with an amazing UI | AKA free-Bitly/Shlink alternative ??

Pckd 652 Jan 1, 2023
Using this component, you can easily use any number of svg files in your project just with one component.

Dynamic-svg-icons-component Using this component, you can easily use any number of svg files in your project just with one component. Usage/Examples i

Hassan Mohammadi 2 Nov 2, 2022
This is a complete news application having some awesome AI tool like Alan AI and use advance React concepts.

News AI Live_Site Setup to use and run it. You have to install following dependencies npm install npm i @material-ui/core @alan-ai/alan-sdk-web classn

Muhammad Awais 2 Oct 7, 2021
Shopping and E-commerce: A client-side utility project for a Shop product page. Calculate the order price, and check availability with supporting N* filters.

Shop Price Checker Shopping and E-commerce: A client-side utility project for a Shop product page. Calculate the order price, and check availability w

Max Base 4 Jul 31, 2022
This project I created with Rodrigo Branas in the live about the micro frontends. For this presentation I used single-spa.js, vue.js and react on different micro frontends

live-microfrontends-with-branas Micro Frontend with Rodrigo Branas This project I created with Rodrigo Branas in the live about the micro frontends. F

Carlos Augusto Sempe Junior 10 Dec 11, 2022