Sticker accordeon

by Ivan Gerasimenko

HTML

<div class="accordeon-wrapper">
    <div id="accordion">
        <h3><a href="#">Section 1</a></h3>
        <div>Test content Test content Test content Test content
        </div>
        <h3><a href="#">Section 2</a></h3>
        <div>Test content Test content Test content Test content
        </div>
        <h3><a href="#">Section 3</a></h3>
        <div>Test content Test content Test content Test content<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            Test content Test content Test content Test content
        </div>
        <h3><a href="#">Section 4</a></h3>
        <div>Test content Test content Test content Test content
        </div>
        <h3><a href="#">Section 5</a></h3>
        <div>Test content Test content Test content Test content
        </div>
    </div>
    
    <div class="sticker-top"></div>
    <div class="sticker-bottom"></div>
</div>

CSS

.sticker-top, .sticker-bottom {
    width: 30px;
    height: 10px;
    background: #cccccc;
    border: 2px dotted #00aa00;
}
.sticker-top {
    position: fixed;
    top: 0px;
}
.sticker-bottom {
    position: fixed;
    bottom: 0px;
}

.accordeon-wrapper {
    margin: 0 30px;
}

JavaScript

/* Сделать аккордеон с залипающими у краёв экрана записями при скролле 
Плохо, что jquery accordeon делает высоту всех блоков одинаковой
*/

$(function() {
    $("#accordion").accordion({ autoHeight: true});
        $("#accordion").accordion({ collapsible: true });
});