ある程度下がったらサイドバーを隣に固定

by nju33

HTML

<div class="side">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

<div class="main">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

SCSS

body {
    width: 30em;
    position: relative;
    font-size: 15px;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.side, .main {
    float: left;
}

.side {
    width: 30%;
}

li:nth-of-type(-n+2) {
    height: 5em;
    width: inherit;
    background-color: #A8A858;
    margin-bottom: 1em;
}

li:nth-of-type(3) {
    height: 15em;
    width: inherit;
    background-color: #99596B;
}

.main {
    width: 70%;
    background-color: #4A7C95;
    height: 90em;
}

.content {
    height: 30em;
}

.content:nth-of-type(2) {
    background-color: lighten(#4A7C95, 20%);    
}

JavaScript

$.fn.sideFixed = function() {
    var $parent = $(this), $target = $parent.find("li:last-child");
    var parent_height = $parent.height();
    var target_height = $target.height(), target_width = $target.width();
    var position = parent_height - target_height - 15;
    
    var ofTarget = ({
            "position": "fixed",
            "top": "1em",
            "width": target_width });
    
     $(document).on("scroll", function() {
         return ($(this).scrollTop() > position )? $target.css( ofTarget ) : $target.css( "position", "static" ) });
}

$(".side").sideFixed();