How to make panel heading 'fixed' at the top in Bootstrap?

Question

I want to have the panel heading 'fixed' at the top. I tried:

.panel-heading {
    position: fixed;
    width: 100%;
    z-index: 99999;
    top: 0;
}

It works perfectly for anything below 768px but for anything above it goes way out of range. Any ideas as to why this happens?

 .glyphicon-user { font-size: 25px; color: #3399ff; margin-left: 15px; } .panel-heading { position: fixed; width: 100%; z-index: 99999; top: 0; } .panel-heading h1 { padding-bottom: 0.65em; color: #3399ff; font-weight: bold; } .panel-body { padding: 0; } .col-xs-12 { padding-left: 0; padding-right: 0; } .chats { list-style-type: none; margin: 0; padding: 0; } .chats li { border-bottom: 2px solid #eee; } .chats a { display: block; color: #000; text-decoration: none; height: 85px; padding: 15px 0; } .chats a:hover, .chats a:hover .glyphicon-user, .chats a:hover .text-muted { background-color: #3399ff; color: white; } .chats .sender { margin-left: 10px; } .chats .timestamp { margin-right: 15px; } .chats .chat-sample { clear: right; margin-left: 50px; padding-top: 5px; margin-right: 15px; } .chats li:last-child { border-bottom: none; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class='container'> <div class='row'> <div class='col-sm-6 col-xs-12 col-centered'> <div class='panel panel-default'> <div class='panel-heading'> <div class='btn-group pull-left'> <div class='dropdown'> <button class='btn btn-default btn-xs dropdown-toggle' data-toggle='dropdown' type='button'> <span class='glyphicon glyphicon-cog'</span> </button> <ul class='dropdown-menu'> <li><a href='#'>Delete All Chats</a></li> <li><a href='#'>Log Out</a></li> </ul> </div> </div> <div class='btn-group pull-right'> <div class='dropdown'> <button class='btn btn-default btn-xs dropdown-toggle' data-toggle='dropdown' type='button'> <span class='glyphicon glyphicon-plus'></span> </button> <ul class='dropdown-menu dropdown-menu-right'> <li><a href='#'>New Chat</a></li> </ul> </div> </div> <h1 class='panel-title text-center'>FunChat</h1> </div> <div class='panel-body'> <ul class='chats'> <li> <a href=''> <div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div> <div class='sender pull-left'><strong>John Appleseed</strong></div> <div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div> <p class='chat-sample text-muted'>What time is it?</p> </a> </li> <li> <a href=''> <div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div> <div class='sender pull-left'><strong>Verizon Wireless</strong></div> <div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div> <p class='chat-sample text-muted'>Your bill is due on 12/12/2012. Please pay before the due date to avoid service interuption. ...</p> </a> </li> <li> <a href=''> <div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div> <div class='sender pull-left'><strong>Sergey Brin</strong></div> <div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div> <p class='chat-sample text-muted'>Come down to the Googleplex for an interview. We would like to talk to you about some exciti...</p> </a> </li> <li> <a href=''> <div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div> <div class='sender pull-left'><strong>John Appleseed</strong></div> <div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div> <p class='chat-sample text-muted'>What time is it?</p> </a> </li> <li> <a href=''> <div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div> <div class='sender pull-left'><strong>Verizon Wireless</strong></div> <div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div> <p class='chat-sample text-muted'>Your bill is due on 12/12/2012. Please pay before the due date to avoid service interuption. ...</p> </a> </li> <li> <a href=''> <div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div> <div class='sender pull-left'><strong>Sergey Brin</strong></div> <div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div> <p class='chat-sample text-muted'>Come down to the Googleplex for an interview. We would like to talk to you about some exciti...</p> </a> </li> <li> <a href=''> <div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div> <div class='sender pull-left'><strong>John Appleseed</strong></div> <div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div> <p class='chat-sample text-muted'>What time is it?</p> </a> </li> <li> <a href=''> <div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div> <div class='sender pull-left'><strong>Verizon Wireless</strong></div> <div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div> <p class='chat-sample text-muted'>Your bill is due on 12/12/2012. Please pay before the due date to avoid service interuption. ...</p> </a> </li> <li> <a href=''> <div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div> <div class='sender pull-left'><strong>Sergey Brin</strong></div> <div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div> <p class='chat-sample text-muted'>Come down to the Googleplex for an interview. We would like to talk to you about some exciti...</p> </a> </li> <li> <a href=''> <div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div> <div class='sender pull-left'><strong>John Appleseed</strong></div> <div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div> <p class='chat-sample text-muted'>What time is it?</p> </a> </li> <li> <a href=''> <div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div> <div class='sender pull-left'><strong>Verizon Wireless</strong></div> <div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div> <p class='chat-sample text-muted'>Your bill is due on 12/12/2012. Please pay before the due date to avoid service interuption. ...</p> </a> </li> <li> <a href=''> <div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div> <div class='sender pull-left'><strong>Sergey Brin</strong></div> <div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> Thursday</small></div> <p class='chat-sample text-muted'>Come down to the Googleplex for an interview. We would like to talk to you about some exciti...</p> </a> </li> </ul> </div> </div> </div><!--end column--> </div><!--end row 1--> </div><!--end container--> 

Answer 1

Change The CSS for .panel-heading from:

.panel-heading {
    position: fixed;
    width: 100%;
    z-index: 99999;
    top: 0;
}

to this:

.panel-heading {
    position: sticky;
    width: 100%;
    z-index: 99999;
    top: 0;
}