使div內的文字像詞綴

Question

這是我想要做的，我希望「最新消息」在滾動時保持在頂部。我該怎麼做？我可以在那裏申請「Affix」嗎？有人能告訴我如何做到這一點嗎？

這是我工作的圖片。

，這裏是我的新聞，事件代碼，並公佈

<div class="content"> 
     <div class="container"> 
      <div class="row"> 

      <div class="col-xs-12 col-md-9"> 
     <div class="fix leftbar floatleft"> 
      <div class="fix left_sidebar"> 
       <div class="news"> 
        <h2><i class="fa fa-newspaper-o"></i> Latest News</h2> 
        <hr class="carved"> 


         <?php 
         include_once('connection.php'); 
         $sql ="SELECT * FROM news"; 
         $result = mysqli_query($con, $sql); 

         while($row = mysqli_fetch_array($result)){ 
         $title = $row['news_title']; 
         $date = $row['news_date']; 
         $content = $row['news_content']; 
         $newsimage = $row['news_image']; 
         ?> 
         <div class="fix single_news"> 
          <div class="single_image"> 
           <img src="<?php echo $newsimage; ?>" alt="court"> 
          </div> 
          <a href="#"><?php echo $title; ?></a> 
          <p><?php echo $date; ?></p> 
         <p><?php echo $content; ?></p> 
         </div> 
          <hr> 
         <?php 
         } 
         ?> 


        <a href="#" class="view_news">View More News</a> 

       </div> 
      </div> 
     </div> 
     </div> 

     <div class="col-xs-6 col-md-3"> 
     <div class="fix sidebar floatright"> 
      <div class="fix single_sidebar"> 
       <div class="events"> 
        <h2><i class="fa fa-calendar"></i> Upcoming events</h2> 
           <hr class="carved"> 
           <div class="fix single_events"> 
            <div class="date"> 
             <span class="month">August</span> 
              <h1 class="day">28</h1> 
            </div> 
            <h2>Independence Day</h2> 
            <p>7:00 AM - 8:00 PM</p> 
           </div> 
           <hr> 
           <div class="fix single_events"> 
            <div class="date"> 
            <span class="month">August</span> 
            <h1 class="day">28</h1> 
            </div> 
            <h2>New Year</h2> 
            <p>7:00 AM - 8:00 PM</p> 
           </div> 
           <hr> 
           <div class="fix single_events"> 
            <div class="date"> 
            <span class="month">August</span> 
            <h1 class="day">28</h1> 
            </div> 
            <h2>Thesis Defense</h2> 
            <p>7:00 AM - 8:00 PM</p> 
           </div> 
              <hr> 
           <a href="#" class="view_calendar">View Academic Calendar</a> 
       </div> 
      </div> 
     </div> 
     </div> 

     <div class="col-xs-6 col-md-3"> 
      <div class="fix bottombar floatright"> 
      <div class="fix bottom_bar"> 
       <div class="announcements"> 
          <h2><i class="fa fa-bullhorn"></i> Announcements</h2> 
           <hr class="carved"> 
           <div class="fix single_announce"> 
            <a href="#">Sample Announcements</a> 
           </div> 

           <div class="fix single_announce"> 
            <a href="#">Sample Announcements</a> 
           </div> 

           <div class="fix single_announce"> 
            <a href="#">Sample Announcements</a> 
           </div> 

           <div class="fix single_announce"> 
            <a href="#">Sample Announcements</a> 
           </div> 

           <div class="fix single_announce"> 
            <a href="#">Sample Announcements</a> 
           </div> 

           <div class="fix single_announce"> 
            <a href="#">Sample Announcements</a> 
           </div> 

           <div class="fix single_announce"> 
            <a href="#">Sample Announcements</a> 
           </div> 

              <hr> 
           <a href ="#" class="view_announcements">View more announcements</a> 

       </div> 
      </div> 
      </div> 
     </div> 


     </div> 

     </div> 
    </div> 

UPDATE 這裏是我的新聞

hr.carved { 
    clear: both; 
    float: none; 
    width: 100%; 
    height: 2px; 
    border: none; 
    background: #ddd; 
    background-image: -webkit-gradient(
     linear, 
     left top, 
     left bottom, 
     color-stop(0.5, rgb(126,27,18)), 
     color-stop(0.5, rgb(211,45,31)) 
); 
    background-image: -moz-linear-gradient(
     center top, 
     rgb(126,27,18) 50%, 
     rgb(211,45,31) 50% 
); 
} 
.view_news{ 
    color:#a92419; 
    float:right; 
} 
h1,h2,h3,h4,h5,h6{font-weight:normal;margin:0 0 15px;} 
.floatright{ 
    float: right; 
} 
.floatleft{ 
    float: left; 
} 
.fix{ 
    overflow: hidden; 
} 
.leftbar{ 
    background:none repeat scroll 0 0 #FFFFFF; 
    padding:19px; 
    width: 850px; 
    box-shadow: 0 0 3px #ccc; 
    display:block; 
    max-height:908px; 
    overflow-y:scroll; 

} 
.single_news{ 
    margin-bottom: 25px; 

} 
    .news > h2,.left_sidebar > h2 { 
    color:#a92419; 
    font-size: 18px; 
    font-weight: bold; 
    line-height: 22px; 
    padding-bottom: 5px; 

    } 
.single_news a{ 
    display: block; 
    color: #a92419; 
    font-size: 17px; 

} 
.single_news p{ 
    color: #717171; 
    font-size:11px; 
    margin-top: 5px; 

} 
.single_image{ 
    float: left; 
    margin-right: 10px; 

} 
.single_image img{ 
    width: 200px; 
    height: 150px; 
} 

Answer 1

你可以獨自實現這一使用CSS的CSS。如果您製作.news元素position: relative，然後將「最新消息」h2position: fixed置頂。試試這個：

.news { 
    position: relative; 
} 
.news h2 { 
    position: fixed; 
    top: 0; 
} 

請注意，您可能還需要給.news一些padding-top將內容推壓，所以它不是由固定h2模糊。

UPDATE

現在你已經加入你的CSS我可以看到，它實際上是.leftbar元素多數民衆贊成滾動，讓你的CSS變化需要是這樣的：

.leftbar { 
    position: relative; 
    padding-top: 50px; 
} 
.leftbar h2 { 
    position: fixed; 
    top: 25px; 
} 

Working example