js関数のスクロールを設定する方法は、親の底を超えないようにしますか？

Question

html、js、cssの例はhttps://jsfiddle.net/t9mfmaa3/5/です。

/* Latest compiled and minified JavaScript included as External Resource */ 
 
$(function() { 
 

 
    var $sidebar = $("#e"), 
 
    $window = $(window), 
 
    $offset = $sidebar.offset(), 
 
    $topPadding = 15; 
 

 
    $window.scroll(function() { 
 

 
    if ($window.scrollTop() > $offset.top) { 
 
     $sidebar.stop().animate({ 
 
     marginTop: $window.scrollTop() - $offset.top + $topPadding 
 
     }); 
 
    } else { 
 
     $sidebar.stop().animate({ 
 
     marginTop: 0 
 
     }); 
 
    } 
 
    }); 
 

 
});

/* Latest compiled and minified CSS included as External Resource*/ 
 

 
/* Optional theme */ 
 

 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 
body { 
 
    margin: 10px; 
 
} 
 
#c { 
 
    background-color: red; 
 
    height: 2400px 
 
} 
 
#e { 
 
    background-color: lightblue; 
 
    height: 600px 
 
} 
 
#b { 
 
    height: 2400px; 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 

 
    <div class="a"> 
 
     <div id="b" class="column col-xs-3 col-sm-3"> 
 
     <div id="e" class=""> 
 
      blue 
 
     </div> 
 
     </div> 
 
     <div id="c" class="center_column col-xs-9 col-sm-9"> 
 
     red 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

I青色ブロックが黄色のブロックに常に青いものを意味黄色のブロックを超えないようにすることを試みました。私の考えは、ブロックイエローとブロックブルーを検出するコードを設定することです。しかし、私は成功しませんでした。誰にも何か提案がありますか？ありがとう

Answer 1

既にブートストラップを使用している場合は、それらの接尾辞javascriptを使用することもできます。ここで

getbootstrap.com

は一例です：

jsfiddle.net

$(function() { 

    var $sidebar = $("#e"), 
    $body = $('body'), 
    $parent = $('#b'), 
    topPadding = 15, 
     offset=$sidebar.offset(); 
    $sidebar.affix({ 
     offset: { 
     top: function() { 
     return $parent.offset().top - topPadding; 
     }, 
     bottom: function() { 
     return $(document.body).height() - ($parent.offset().top + $parent.outerHeight()); 
     } 
    } 
    }); 
}); 

あなたはそれが終わり近くに少し奇妙な、びくびく働く気づくかもしれませんが、それは上でそれを使用するときに離れて行く必要があります実際のサイト（iframeの内側ではなく）