スクロールしても移動しないブロック

yahoo(http://www.yahoo.co.jp/)のサイトのように
下へスクロールさせると、右側のページ上部に戻るなどがある部分はスクロールせず、左側の部分だけスクロールするようにするにはどのように作れば良いでしょうか。

行動規範の内容に同意します

回答2件

position:stickyプロパティは、通常の要素と同じようにスクロールの影響を受けますが、画面から離れようとするタイミングで残り続けよう（sticky）とします。

Caniuseにもある通り、このプロパティのブラウザごとのサポートはまちまちなので、githubで公開されている有志のpolyfillを利用することで、下記のように実装できます。

DEMO

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5
6<script src="https://code.jquery.com/jquery-1.12.0.js"></script>
7<script src="https://cdn.rawgit.com/filamentgroup/fixed-sticky/v0.1.6/fixedsticky.js"></script>
8<link rel="stylesheet" href="https://cdn.rawgit.com/filamentgroup/fixed-sticky/v0.1.6/fixedsticky.css">
9<style>
10#container{
11  display:flex;
12}
13.fixedsticky{
14  top: 0;
15}
16#my-element{
17  width: 100%;
18  height: 3em;
19  background: antiquewhite;
20}
21</style>
22<script>
23$(function(){
24  $('#my-element').fixedsticky();
25})
26</script>
27</head>
28<body>
29
30<div id="container">
31  <article>
32    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio voluptatibus id molestiae aliquam quisquam labore tenetur! Necessitatibus, ab distinctio facere voluptas itaque tempora quia pariatur suscipit adipisci nam. Saepe, amet!</p>
33  </article>
34  <div>
35    <p>example</p>
36    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt sit tenetur qui quibusdam, officia dolore tempore maiores accusamus sint ipsa iusto. Temporibus mollitia numquam voluptate, rem ducimus culpa nemo velit.</p>
37    <div id="my-element" class="fixedsticky">
38      this is sticky
39    </div>
40  </div>
41</div>
42  
43</body>
44</html>