固定divの内容が他のdivと同じように変更されます

Question

投稿の情報（投稿日、ノート数、パーマリンクなど）を含むレイアウトの上部にdivを修正しようとしています過去の投稿を下にスクロールするときのこの情報私はそれがjavascriptの任意の種類またはcssを使用していくつかの複雑な位置付けを必要とするかどうかはわかりません。投稿をレイアウトする方法は次のとおりです。投稿ごとに特定の投稿情報を取得して、投稿をスクロールして固定ディビジョン内で変更するにはどうすればよいですか？

#container { 
    width: 960px; 
    margin: 0px auto; 
} 

#changingpostinformation { 
    position: fixed; 
    margin: 0px auto; 
} 

<div id="container"> 

    <div id="changingpostinformation">fixed post information div that's information changes as each post below reaches the top of #container</div> 

     <div class="post"> 
      <h3>Post Title> 
      <p>This is the body of this example post.</p> 
     </div> 

     <div class="post"> 
      <h3>Post Title> 
      <p>This is the body of this example post.</p> 
     </div> 

    </div> 

Answer 1

@ShankarSangoliが言うように、あなたはtop: 0;を追加する必要があり、また、left: 0;#changingpostinformationに（または他の値に位置決めするために、しかし、あなたが好きな）

ます」ページ上に最初に表示される投稿を見つけてその情報を表示するにはjavascriptが必要です。ウィンドウのサイズが変更またはスクロールされたとき

$(function() { 
    $(window).bind('load resize scroll', function() { 
     var doctop = $('body').scrollTop(); 

     // loop over all posts, from top to bottom 
     $('.post').each(function() { 
      if ($(this).position().top > doctop) { 
       put_postinfo_in_fixed_div($(this)); 
       return false; // breaks from the loop 
      } 
     }); 
    }); 
}); 

この機能は、ページがロードされたときに一度実行され、また。

put_postinfo_in_fixed_div()を実装して投稿divを取得し、それを実行する必要があります。

Answer 2

使用このCSS：

#changingpostinformation { 
    position: fixed; 
    top: 0px; 
}