jquery.newsAffix

.Demo is located here

News affix is handy plugin which is very useful on blog post with a lot of chapters. Just define chapter headers and insert affix HTML on your site and you are ready to go.

Init example (default values)

$(function () {
    $('body').newsAffix({
        headerWrapper: "#targeted-wrapper",
        headerClass: ".content__title",
        sidebar: ".js-news-affix-items",
        newsAffixSel: ".js-news-affix",
        setAffixClasses: {
            cssClass: '.news-affix__bar',
            cssRule: 'width'
        },
        onClickElements: '.js-affix-click',
        scrollAnimationSpeed: 750,
        breakPoint: 1250
    });
});

Options

• headerWrapper - main header wrapper which contains chapters. Chapters should be direct childs of the main targeted wrapper.
• headerClass - header title of each chapter
• sidebar - affix sidebar class name
• newsAffixSel - main news affix selector
• setAffixClasses / cssClass - CSS class for news affix currently active item. cssRule is used should affix item calculate width or height on the current element. Previous version had width & height, new version has only width.
• onClickElement - element which will trigger on scroll event
• scrollAnimationSpeed - speed of animation