我已經得到一個固定的div，其中包含用戶可以選擇的一些數據，並在其下方根據用戶選擇獲得許多產品。固定標題 - 打開並推送內容
.header{
position:fixed;
}
固定股利是10px的高度，但是當用戶想要改變選擇它的增長，並揭示-with的Jquery的slideToggle更多的數據。
問題是當它打開時它覆蓋了一些產品。 是否有任何解決方案，所以當它切換產品部分將推下？
例子 - https://jsfiddle.net/pv41257p/10/
也許是你的解決方案。
jQuery的
$('.header_title').click(function(e){
e.stopPropagation();
$('.header_data').slideToggle();
$('.header').css("position","relative");
});
$(document).click(function(){
$('.header_data').slideUp();
$('.header').css("position","fixed");
});
據我只知道，當你在頁面的頂部，你可以下推內容。但是，當您向下滾動內容時，標題不會是直接的，因此不可能在任何時候（任何滾動位置）下推任何內容（標題下方的內容）。
我還有一些更適合你的情況。
當您滾動並且您的div高度爲.header時，JQuery將給出position:fixed至.header div。但是，如果您處於頁面起始處，則可以向下推動以下內容。
$(document).ready(function() {
$(".header_title").click(function() {
$(".header_data").slideToggle();
});
$(window).scroll(function()
\t {
var h = $(".header").outerHeight();
var curScroll = $(this).scrollTop();
if(curScroll > h)
{
\t $(".header").css("position","fixed");
}
else
{
\t $(".header").css("position","relative"); \t
}
});
});.header {
display:block;
width:70%;
position:relative;
background-color:red;
margin:auto;
left:0;
right:0;
text-align:center;
cursor:pointer;
z-index:999;
}
.header_title {
color:white;
height:10px;
}
.header_data {
display:none;
}
.header_data span {
display:block;
}
.products {
position:relative;
/*padding-top:18px;*/
background-color:green;
}
.pro {
padding:10px;
border:1px solid white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="header">
<span class="header_title">HEADER TITLE - click for more data</span>
<div class="header_data">
<span>cheap</span>
<span>cool</span>
<span>gadget</span>
<span>small</span>
</div>
</div>
<div class="products">
<div class="pro">this is a product!</div>
<div class="pro">this is a product!</div>
<div class="pro">this is a product!</div>
<div class="pro">this is a product!</div>
<div class="pro">this is a product!</div>
<div class="pro">this is a product!</div>
<div class="pro">this is a product!</div>
<div class="pro">this is a product!</div>
<div class="pro">this is a product!</div>
<div class="pro">this is a product!</div>
<div class="pro">this is a product!</div>
</div>嘗試採取隱藏塊（塌縮內容）從報頭的。將它直接放在標題後面display:none;，然後用jquery切換它的視圖。這將保持頭部固定，但允許在可摺疊內容展開時將頁面內容壓下。
此外，添加一個頁邊距：10px;到崩潰的內容，所以當它擴展時，它在固定標題下。這將需要滾動回頁面的頂部，但是當您向下滾動然後激活摺疊內容時。
你的問題反映在上面的鏈接？ – imGaurav
即使您這樣做，當您滾動時，標題也會被固定，以便在滑動時它會覆蓋內容。 – divy3993