Fixed Floating Section Headers

Version 2.1: Floating Section Headers does not work on Safari iOS, temporarily detected and disabled for this case. Version 2: Fixed Floating Section Headers Version 1: Fixed Floating Sidebar

HTML

<div class="header">This is the header</div>
<div class="content">
    
    <div class="title">This is the page title</div>

    <div class="section">
        <div class="section-header">This is a section header</div>
        <div class="section-content">This is a section content area</div>
    </div>

    <div class="section">
        <div class="section-header">This is a section header</div>
        <div class="section-content">This is a section content area</div>
    </div>
    
    <div class="section">
        <div class="section-header">This is a section header</div>
        <div class="section-content">This is a section content area</div>
    </div>

    <div class="section">
        <div class="section-header">This is a section header</div>
        <div class="section-content">This is a section content area</div>
    </div>
    
    <div class="section">
        <div class="section-header">This is a section header</div>
        <div class="section-content">This is a section content area</div>
    </div>

    <div class="section">
        <div class="section-header">This is a section header</div>
        <div class="section-content">This is a section content area</div>
    </div>
    
    <div class="section">
        <div class="section-header">This is a section header</div>
        <div class="section-content">This is a section content area</div>
    </div>

    <div class="section">
        <div class="section-header">This is a section header</div>
        <div class="section-content">This is a section content area</div>
    </div>
    
    <div class="section">
        <div class="section-header">This is a section header</div>
        <div class="section-content">This is a section content area</div>
    </div>

    <div class="section">
        <div class="section-header">This is a section header</div>
        <div class="section-content">This is a section content area</div>
    </div>
    
</div>
<div class="sidebar">This is the sidebar</div>
<div...

CSS

html, body {font-family: Tahoma; font-size: 1em; background-color: #bbb;}

.header{width:100%;background:#aaa;height:80px}
.content{width:80%;background:#bbb;float:left}
.footer{width:100%;background:#ccc;height:50px;clear:both}

.sidebar{width:20%;background:#ddd;height:390px;float:right}
.sidebar.fixed{position:fixed;right:50%;margin-right:-50%}

.title{font-size: 1.2em; text-align: center; padding: 20px;}

.section{width: 90%; margin:auto auto; padding: 5px; background-color: #ddd;}
.section-header{ padding: 10px; background-color: #999; color: #eee; }
.section-content{width: auto; margin-top:5px; padding: 10px; height: 300px; background-color: #eee; }
.section-header.fixed{position:fixed;width:100%;margin-right:-50%;}

JavaScript

// ----------------------------------------------------------------------
var Helper = Helper || {},
    Page = Page || {},
    $window = $(window),        // cache
    $document = $(document);    // cache

// ----------------------------------------------------------------------
Helper.isAppleDevice = (function () {
    return (
        (navigator.userAgent.toLowerCase().indexOf("ipad") > -1) ||
        (navigator.userAgent.toLowerCase().indexOf("iphone") > -1) ||
        (navigator.userAgent.toLowerCase().indexOf("ipod") > -1)
    );
})(); // declare an anonymous function and execute it once immediately


// ----------------------------------------------------------------------
// Sidebar
Page.initSidebar = function (IN_szSidebarSelector) {
    Page.sidebarSelector = IN_szSidebarSelector || '.sidebar';
    Page.sidebar = $(Page.sidebarSelector);
    if (Page.sidebar.length) {
        Page.sidebarTop = Page.sidebar.position().top;
        Page.sidebar.addClass('fixed');
    }
};

// Sections and Section Headers
Page.initSections = function (IN_szSectionsSelector, IN_szSectionHeadersSelector) {
    Page.sectionsSelector = IN_szSectionsSelector || '.section';
    Page.sectionHeadersSelector = IN_szSectionHeadersSelector || '.section-header';

    Page.sections = $(Page.sectionsSelector);
    Page.sectionHeaders = $(Page.sectionHeadersSelector);

    // does not work properly on Safari iOS yet
    if ( ! Helper.isAppleDevice && Page.sections.length && Page.sectionHeaders.length) {
        //Page.sectionHeaders.addClass('fixed');
        Page.sectionHeaderTops = [];

        Page.sectionHeaders.each(function (i, el) {
            var $el = $(el);
            $el.text($el.text() + ' ' + i);
            Page.sectionHeaderTops[i] = $el.position().top;
        });
    }
};

Page.onResize = function () {
    Page.sectionHeaders.each(function (i, el) {
        var $el = $(el);
        $el.width($el.next().innerWidth() - 20);
    });
};

Page.onScroll = function(event) {
 ...