固定标题 - 打开并推送内容

Question

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

.header{
position:fixed;
}

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

问题是当它打开时它涵盖了一些产品。 是否有任何解决方案，所以当它切换产品部分将推下来？

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

Answer 1

也许是你的解决方案。

<强>的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

Answer 2

据我所知，只有当您处于页面顶部时才能推送内容。但是当您向下滚动时，内容在标题之后不会是直接的，因此无法随时按下任何内容（标题下方的内容）（任何滚动位置）。

在我的情况下，我还有更适合的事情。

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

JSFiddle : Demo

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

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