javascript - 使 div 内的文本像 affix 一样保持在顶部

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>

更新这是我的新闻 CSS

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 实现此目的。如果你制作.news元素 position: relative然后制作'最新消息'h2 position: fixed在顶部。试试这个:

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

请注意，您可能还需要提供 .news一些 padding-top将内容向下推，使其不会被固定的 h2 遮挡.

更新

现在您已经添加了 CSS，我可以看到它实际上是 .leftbar滚动的元素，因此您的 CSS 更改需要像这样:

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

Working example