↕ sidescroll.js

Accessible fixed Sidebar with Smart Scroll.

About

There is different cases when you are using sidebar and often CSS just not enough to make it user friendly. What scenarios you should be considered to make sidebar always accessible.

• W - Window
• S - Sidebar
• C - Content

S >= C, S <= W, C <= W	S > C, S >= W, C <= W
Simplest scenario when Sidebar greater or equal Content height and less than Window height. For this case is nothing be worried about, static position is pretty enough.	Another static scenario is when Sidebar is greater than Content height and they both can be greater than window size. Scroll will be determinated by Sidebar height.

S < C, S <= W, C > W	S < C, S > W, C > W
Sidebar is less than Content and Window heights. In this cases static position is not enough. Sidebar should be fixed to be always visible.	And most complicated scenario is when Sidebar less than Content height and greater with Content than window size. In this case fixed position is not enough. Sidebar should be scrollable.

To make it happen was created sidescroll.js plugin.

Demo

To checkout all scenarios try live demo.

Installation

bower install sidescroll

or grab the source version or minified version and put it right before closing body tag or into head after jQuery.

    ...
    <script src="pathto/jquery.min.js"></script>
    <script src="pathto/jquery.sidescroll.min.js"></script>
    <script>
        $('.sidebar').sideScroll();
    </script>
    </body>
</html>

Usage

Default

Init sideScroll method to your sidebar

$('.sidebar').sideScroll();

add a line of CSS to your styles

.sidebar.is-fixed {
    position: fixed;
    top: 0;
}

Options

Name	Type	Default value	Description
content	selector	'.container'	container selector
fixedClass	string	'is-fixed'	sidebar fixed class name

$('.sidebar').sideScroll({
    content: '.my-content',
    fixedClass: 'my-fixed'
});

Commands

Name	Description
start	plugin initialize, also can be used as continue after stop
stop	plugin stops working, but saved current position
clear	plugin stops working and reset sidebar position

$('.sidebar').sideScroll('start');
$('.sidebar').sideScroll('stop');
$('.sidebar').sideScroll('clear');

This overrides fixed class name, which applying to sidebar

Browsers support

IE / Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Opera Mini	Chrome for Android
IE9, IE10, IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions

Contributing

I'll check out your contribution if you:

• Have a clear and comprehensive description for your changes in pull request.

License

MIT