Skip to content

Latest commit

 

History

History
95 lines (70 loc) · 2.32 KB

plugins.md

File metadata and controls

95 lines (70 loc) · 2.32 KB

fix plugin

To use fixable headers you should initialize fix plugin after baron:

<div class="scroller">
    <div class="header__title-wrapper">
        <div class="header__title">First element</div>
    </div>
    ...content...
    <div class="header__title-wrapper">
        <div class="header__title">Second element</div>
    </div>
    ...content...
</div>
baron(baronParams).fix(params);

where:

var params = {
    // CSS selector for fixable elements
    // Must have parentNode (no margin and padding allowed!) with same height (see demo for details). Also see 'limiter' parameter.
    elements: '.header__title',

    // CSS class for elements which now are outside of viewport
    outside: 'header__title_state_fixed',

    // CSS class for elements which now are in viewport
    inside: 'header__title_state_unfixed',

    // CSS class for closest outsite element wrapper from top (left)
    before: 'header__title_position_top',

    // CSS class for closest outsite element wrapper from bottom (right)
    after: 'header__title_position_bottom',

    // if true - sets track top (left) position to header[0].parentNode.offsetHeight (offsetWidth)
    // Default: false
    limiter: true,

    // Radius for element fixing in px
    // Default: 0
    radius: 10,

    // Works identical to outside as if radius === 0
    grad: 'header__title_state_grad',

    // Wether click on element should scroll to
    clickable: false,

    // User defined callback on click (data == {x1: current scrollTop, x2: new scrollTop})
    scroll: function(data) {}
};

Controls plugin

baron().controls(params);

var params = {
    // Element to be used as interactive track. Note: it could be different from 'track' param of baron.
    track: '.visual-track',

    // Element to be used as 'down' / 'right' button
    forward: '.forward-btn',

    // Element to be used as 'up' / 'left' button
    backward: '.backward-btn',

    // Multiplyer for page-down action. Use 1 to scroll preciesly one screen per track click.
    // Default: .9
    screen: .5

    // Scroll distance per control button click in px
    // Default: 30
    delta: 40
};

test plugin

If you have some troubles with baron, use test plugin:

baron(...).test(params);

And read results in browser console.

There is no params for test() right now.