nethken nethken - 5 months ago 7
HTML Question

Make the text inside the div to stay at the top like affix

Hello monsters of programming. This is what i want to do, i want the "Latest news" to stay at the top while scrolling. How can i do it? Can i appy the "Affix" there? Can someone give me ideas how to do it?

here is the picture of my work.
enter image description here

here is my code for the news, events, and announcement

<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
here is my css for news

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

You can achieve this using CSS alone. If you make the .news element position: relative and then make the 'Latest News' h2 position: fixed at the top. Try this:

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

Note that you may also need to give .news some padding-top to push the content down so that it's not obscured by the fixed h2.

UPDATE

Now that you've added your CSS I can see that it's actually the .leftbar element that's scrolling, so your CSS changes need to be like this:

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

Working example