固定div的內容隨其他divs滾動而改變

我試圖修復佈局頂部的一個div，該div包含博客文章的信息（發佈日期，註釋數量，固定鏈接等）並更改此信息在您向下滾動過去帖子時。我不確定它是否需要任何類型的JavaScript或使用css進行一些複雜的定位。以下是我將如何佈置帖子。在帖子滾過它時，如何從每個帖子中獲取特定帖子信息以在該固定div內進行更改？固定div的內容隨其他divs滾動而改變

#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>

來源

2012-02-06 Ryan

像@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，並做它說。

來源

2012-02-06 20:05:12 ori

changingpostinformation div目前已經爲每個帖子保留了帖子信息 - 這只是讓它根據當前帖子提供正確信息的問題。 – Ryan 2012-02-06 20:11:33

我的代碼調用'put_postinfo_in_fixed_div'並傳遞第一個可見的post div（作爲jquery對象）。你應該實現這個功能來做你需要的任何事情。 – ori 2012-02-06 20:16:31

使用此CSS：

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

來源

2012-02-06 19:53:31 ShankarSangoli

固定div的內容隨其他divs滾動而改變

回答

相關問題