Fixed Header - 打开并推送内容答案

【问题标题】：Fixed Header - opens and push contentFixed Header - 打开并推送内容
【发布时间】：2015-09-24 14:23:32
【问题描述】：

我有一个固定的 div，其中包含一些用户可以选择的数据，在它下面我根据用户的选择得到了许多产品。

.header{
position:fixed;
}

固定的 div 高度为 10px，但是当用户想要更改选择时，它会增长并显示更多数据 - 使用 Jquery slideToggle。

问题是当它打开时它覆盖了一些产品。有什么解决方案，所以当它切换产品部分时会下推？

示例 - https://jsfiddle.net/pv41257p/10/

【问题讨论】：

您的问题是否反映在上述链接中？
即使你这样做了，当你滚动时，标题会被固定，所以当它向下滑动时它会覆盖内容。

标签： jquery html css header fixed

【解决方案1】：

据我所知，您可以只有在页面顶部时才能下推内容。但是当你向下滚动时，内容不会直接在标题之后，所以，不可能在任何时候（任何滚动位置）下推任何内容（标题下方的内容）。

我还有更适合你情况的东西。

当您滚动并超出.header div 高度时，JQuery 会将position:fixed 提供给.header div。但是如果你在页面的开头，你可以滑动下面的内容向下推。

JSFiddle : Demo

$(document).ready(function () {

    $(".header_title").click(function () {
        $(".header_data").slideToggle();
    });
    $(window).scroll(function()
	{
        var h = $(".header").outerHeight();
        var curScroll = $(this).scrollTop(); 
        if(curScroll > h)
        {
        	$(".header").css("position","fixed");
        }
        else
        {
          	$(".header").css("position","relative");      	
        }
    });
});

.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>

【讨论】：

【解决方案2】：

也许是适合你的解决方案。

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" );
});

DEMO HERE

【讨论】：

请查看 OP 到底想要什么。这与 OP 想要的相差无几。
你还是误会了。

【解决方案3】：

尝试从标题中取出隐藏块（折叠内容）。将其直接放在带有display:none; 的标题之后，然后使用jquery 切换它的视图。这将保持标题固定，但允许在可折叠内容展开时下推页面内容。

另外，添加一个 margin-top:10px;到折叠的内容，所以当它展开时，它位于固定标题的下方。当您向下滚动然后激活折叠内容时，这将需要滚动回页面顶部。

【讨论】：