jQuery

【jQuery】iOSのようなスティッキーヘッダープラグインstickyHeaders

June 1, 2017
stickyheaders

stickyHeadersはiOSのようなスティッキーヘッダー用のjQueryプラグイン。

Usage

<!-- header -->
<h1>Lorem ipsum dolor sit amet.</h1>

<div class="sticky-header-wrap">

    <h2 class="sticky-header">An Epic Heading</h2>
    <!-- ... -->

    <h2 class="sticky-header">Another Epic Heading</h2>
    <!-- ... -->

    <!-- more headings and content -->

</div>

<!-- footer -->
<footer>Lorem ipsum dolor sit amet.</footer>
$('.sticky-header-wrap').stickyHeaders();

Options

var options = {
    headlineSelector:      '.sticky-header',
    hiddenClass:           'sticky-header-hidden',
    stickyElement:         'h2',
    stickyClass:           'sticky-helper',
    stickyChildren:        '<span></span>',
    textContainerSelector: 'span',
    endOfScrollPos:        null
}

MIT