我在这里遇到两件事，我很感激你的帮助。
背景
横幅显示照片和一些信息。然而，这不应该永远存在。横幅必须包含但不是所有信息。所以有一个选项可以折叠它并用图标（如手风琴）展开它。
问题
因为面板必须固定，所以我必须相对于它下面的内容。问题是，当我崩溃时，内容仍然尊重给定的位置。我喜欢这些内容来尊重彼此之间的距离，这样如果它们之间有20px，那么在折叠视图中仍然如此。 （我试过边缘和顶部）但没有雪茄。
我不知道如何完成它的主要问题是，我希望横幅在滚动时自动折叠。我知道那里有一个滚动功能，我之前从未使用它。
这是我的HTML：
<div id="header" class="header navbar navbar-fixed-top navbar-inverse" data-current-theme="navbar-inverse">
<p>menu & logo</p>
</div>
<div class="row">
<div class="col-xs-12">
<div class="banner clearfix">
<div class="collapser">
<a href="#"><i class="fa fa-chevron-up fa-fw collapse-icon"></i></a>
</div>
<div class="banner-info clearfix">
<div class="col-sm-12 col-md-2">
<div class="circle-container">
<img class="img-responsive" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTGjucaoN3fabOcumnr7RKTB3ICTJFLuLClnpiQUIR9oW4a11wb" alt="offender-img">
</div>
</div>
<div class="col-sm-12 col-md-10">
<div class="col-sm-12 col-md-3">
<div class="form-group">
<label class="control-label">Full Name</label>
<span>Floyd "Money" Mayweather</span>
</div>
<div class="form-group">
<label class="control-label">Some Label</label>
<span>Something Here</span>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="form-group">
<label class="control-label">Offender ID#</label>
<span>123569863</span>
</div>
<div class="form-group">
<label class="control-label">Longer Label Example</label>
<span>Something Here with an ellipsis</span>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="form-group">
<label class="control-label">Institution</label>
<span>Graterford</span>
</div>
<div class="form-group">
<label class="control-label">Some Link</label>
<a href="#"><span>Something Here</span></a>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="form-group">
<label class="control-label">Institution</label>
<span>Graterford</span>
</div>
<div class="form-group">
<label class="control-label">Some Link</label>
<span href="#"><p>Something Here</p></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container martop65">
<div class="row">
<div class="col-xs-12">
<p>Lorem ipsum dolor sit amet, et meis definitiones cum, audire iisque alterum no ius. Semper luptatum democritum has no, at sea audire inermis suscipiantur. Ei regione adipiscing ius. An est nonumy habemus, movet probatus recusabo eu eum. Hinc offendit te est, at his falli euripidis.
<br><br>
Pertinax scribentur ullamcorper in nec, sit dolor fastidii ei. Cetero pericula iudicabit no est, tale elitr ad has, eos sumo harum interesset eu. His ne fierent appareat. Vel paulo fierent eleifend id. Pri ut conceptam repudiandae theophrastus, enim periculis ius ex, te est numquam inimicus.
<br><br>
Congue deleniti deseruisse te eos, usu no brute laoreet. Nisl lorem zril eu qui. Vix tempor inimicus an, partem minimum cotidieque mel eu. Aperiam discere an mea, ea graecis scribentur mel, minim ludus saperet no vix. Has at sint sanctus. Eu docendi hendrerit liberavisse mel, ut eum viris voluptaria, eum error voluptua principes ex.
<br><br>
Vis te accumsan lucilius platonem. Possit prodesset eum in. No duo agam nullam detracto. At homero scaevola electram vel.</p>
</div>
</div>
</div>
CSS
body {
background-color: #dddddd;
}
.navbar {
border: none;
border-bottom: 2px solid #30373e;
font-size: 14px;
-webkit-box-shadow: 0 1px rgba(0,0,0,0.025);
box-shadow: 0 1px rgba(0,0,0,0.025);
z-index: 1040;
margin-bottom: 0;
height: 55px;
text-align:center;
color:#ccc;
}
.banner {
border: none;
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.07);
box-shadow: 0 2px 0 rgba(0,0,0,0.07);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
margin-bottom: 20px;
position: fixed;
width: 100%;
background: #101113;
padding: 20px;
display: block;
top: 55px;
border-radius:0;
z-index: 1;
}
.banner .collapser {
position: absolute;
bottom: 10px;
color: #bbb;
}
.banner .circle-container {
position: relative;
left: 35px;
text-align: center;
width: 110px;
height: 110px;
display: flex;
overflow: hidden;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
border-radius: 100%;
border: 3px solid #bbb;
}
.banner .banner-info label {
color: rgba(248,151,29,0.77);
}
.banner .banner-info span {
display: block;
color: #bbb;
white-space: nowrap;
width: 85%;
overflow: hidden;
text-overflow: ellipsis;
}
.martop65 {
/* margin-top: 240px;*/
position:relative;
top:240px;
}
JQUERY
$('.collapser').click(function() {
$collapser = $(this);
$banner = $collapser.parent().find('.banner-info .circle-container').add($collapser.parent().find(".col-md-10 > .col-md-3 > .form-group:nth-of-type(2)"));
$banner.slideToggle(500, function() {
$collapser.find('.collapse-icon').toggleClass('fa-chevron-up fa-chevron-down');
});
});
这是CODEPEN
谢谢！