GithubHelp home page GithubHelp logo

aycarambo / sticky-sidebar-v2 Goto Github PK

View Code? Open in Web Editor NEW

This project forked from blixhavn/sticky-sidebar-v2

0.0 0.0 0.0 467 KB

Pure JavaScript tool for making smart and high performance sticky sidebar.

Home Page: https://blixhavn.github.io/sticky-sidebar-v2/

License: MIT License

JavaScript 97.63% HTML 2.37%

sticky-sidebar-v2's Introduction

Sticky Sidebar v2 Build Status

Pure JavaScript plugin for making smart and high performance sticky sidebars, originally written by Ahmed Bouhuolia.

Why the fork?

This project was forked from the original Sticky Sidebar, written by Ahmed Bouhuolia. As the original project is currently inactive, this fork is an attempt to revive the project and add some improvements.

Examples

Basic Example

Scrollable Sticky Element

For complete documentation and examples see blixhavn.github.com/sticky-sidebar-v2

Why is sticky sidebar so awesome?

  • It does not re-calculate all dimensions when scrolling, just necessary dimensions.
  • Super smooth without incurring scroll lag or jank and no page reflows.
  • It has event trigger on each affix type to hook your code under particular situation.
  • Handle the sidebar when is tall or too short compared to the rest of the container.
  • Zero dependencies and super simple to setup.

Install

You can download sticky sidebar v2 vjQuery plugin from Yarn, NPM or just simply download it from this page and link to the sticky-sidebar.js file in your project folder.

Yarn

If you are using Yarn as package manager:

yarn add sticky-sidebar-v2

NPM

If you are using NPM as package manager:

npm install sticky-sidebar-v2

Usage

Your website's html structure has to be similar to this in order to work:

<div class="main-content">
    <div class="sidebar">
        <div class="sidebar__inner">
            <!-- Content goes here -->
        </div>
    </div>
    <div class="content">
        <!-- Content goes here -->
    </div>
</div>

Note that inner sidebar wrapper .sidebar__inner is optional but highly recommended, if you don't write it yourself, the script will create one for you under class name inner-wrapper-sticky. but this may cause many problems.

If your content is inside a fixed-height div with a scrollbar, this must be specified with the scrollContainer option.

For the above example, you can use the following JavaScript:

<script type="text/javascript" src="./js/sticky-sidebar.js"></script>

<script type="text/javascript">
  var sidebar = new StickySidebar('.sidebar', {
    topSpacing: 20,
    bottomSpacing: 20,
    containerSelector: '.main-content',
    innerWrapperSelector: '.sidebar__inner',
    scrollContainer: '#main-viewport'
  });
</script>

Via jQuery/Zepto

You can configure sticky sidebar as a jQuery plugin, just include jquery.sticky-sidebar.js instead sticky-sidebar.js file than configure it as any jQuery plugin.

<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/jquery.sticky-sidebar.js"></script>

<script type="text/javascript">
  $('#sidebar').stickySidebar({
    topSpacing: 60,
    bottomSpacing: 60
  });
</script>

Make sure to include sticky-sidebar.js script file after jquery.js.

Browser Support

Sticky Sidebar v2 works in all modern browsers including Internet Explorer 9 and above, but if you want it to work with IE9, should include requestAnimationFrame polyfill before sticky sidebar code. For backwards compatibility, a polyfill for ResizeObserver can also be included.

If you have any issues with browser compatibility don’t hesitate to Submit an issue.

License

Sticky Sidebar v2 is released under the MIT license. Have at it.


Maintained by Øystein Blixhavn

Originally made by Ahmed Bouhuolia

sticky-sidebar-v2's People

Contributors

abouolia avatar blixhavn avatar kugaevsky avatar geenkaas avatar d-bunschoten avatar janlucaklees avatar aycarambo avatar matthewgross avatar blazeu avatar tnottu avatar alucard17 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.