Question

所以，我有一个标题，我设置为固定。我有一个滚动下面的项目列表，但标题保持不变。但是，我遇到的一个问题是列表被最顶部的固定标题覆盖，阻碍了列表的第一项。

我尝试添加＆＃34; margin-top：55px;＆＃34;到持有项目列表的容器，但这样做会隐藏标题后面的滚动条，这看起来不是很好。如何在不受阻碍的情况下显示标题和列表？

非常感谢任何帮助。

＆＃13;

body.campaign-body {   height: 100%;  overflow-y: scroll; }
.container.campaign-header { position: fixed;
    z-index: 1000; background: #000; width: 100%; height: 55px; color:#fff;""}
.container.scroll-campaign-list { /*margin-top: 55px;*/ }

＆＃13;

<body class="campaign-body">
  <div class="container campaign-header">
    <div class="row admin-header">
        <div class="header-title">
            <h4 class="white-txt header-name">LISTING</h4>
        </div>
    </div>
 </div>
 <div class="container scroll-campaign-list" id="campaigns-list">
    <div class="row campaigns">
        <div class="twelve columns list-items">
            <h5 class="white-txt campaign-name">Blah blah</h5>
            <p class="campaign-question grey-txt">Blah blah</p>
        </div>
    </div>
    <hr>
    <div class="row campaigns">
        <div class="twelve columns list-items">
            <h5 class="white-txt campaign-name">Blah blah</h5>
            <p class="campaign-question grey-txt">Blah blah</p>
        </div>
    </div>
    <hr><div class="row campaigns">
        <div class="twelve columns list-items">
            <h5 class="white-txt campaign-name">Blah blah</h5>
            <p class="campaign-question grey-txt">Blah blah</p>
        </div>
    </div>
    <hr><div class="row campaigns">
        <div class="twelve columns list-items">
            <h5 class="white-txt campaign-name">Blah blah</h5>
            <p class="campaign-question grey-txt">Blah blah</p>
        </div>
    </div>
    <hr><div class="row campaigns">
        <div class="twelve columns list-items">
            <h5 class="white-txt campaign-name">Blah blah</h5>
            <p class="campaign-question grey-txt">Blah blah</p>
        </div>
    </div>
    <hr><div class="row campaigns">
        <div class="twelve columns list-items">
            <h5 class="white-txt campaign-name">Blah blah</h5>
            <p class="campaign-question grey-txt">Blah blah</p>
        </div>
    </div>
    <hr><div class="row campaigns">
        <div class="twelve columns list-items">
            <h5 class="white-txt campaign-name">Blah blah</h5>
            <p class="campaign-question grey-txt">Blah blah</p>
        </div>
    </div>
    <hr><div class="row campaigns">
        <div class="twelve columns list-items">
            <h5 class="white-txt campaign-name">Blah blah</h5>
            <p class="campaign-question grey-txt">Blah blah</p>
        </div>
    </div>
    <hr><div class="row campaigns">
        <div class="twelve columns list-items">
            <h5 class="white-txt campaign-name">Blah blah</h5>
            <p class="campaign-question grey-txt">Blah blah</p>
        </div>
    </div>
    <hr>
 </div>
 </body>

＆＃13;

Answer 1

首先，重置身体边距：

body {
  margin: 0;
}

接下来，为scroll-campaign-list设置padding-top（不是margin-top）：

.container.scroll-campaign-list {
  padding-top: 50px;
}

Answer 2

我之前添加了一个“拦截器”：

HTML：

<div class="blocker"> </div>

CSS：

/* Matches your header height */
.blocker { height: 55px; };

你正在做的就是在标题下放置一个不可见的div

小提琴：https://jsfiddle.net/btv5bjfd/

Answer 3

我已将您的代码发布在一个小提琴中，使其更易于使用。下面是结果的小提琴链接，看看并告诉我它是否是你想要的。

我已将您的标题攻击发送到页面顶部，这使我能够在列表中添加边距。

.container.campaign-header { position: fixed;
    z-index: 1000; background: #000; width: 100%; height: 55px; color:#fff; top:0;}
.container.scroll-campaign-list {margin-top: 75px; }

https://jsfiddle.net/m4fw7mk1

Answer 4

如果您希望滚动条不滚动＆＃34;通过＆＃34;标题，您将需要创建一个固定的内容区域来处理滚动，而不是通常处理滚动的主体。

检查This Fiddle的基础知识。

确保你的身体没有边距和填充

* {
    margin:0;
    padding:0;
}

然后，确保您的标题已固定到顶部和左侧

.campaign-header {
    top:0;
    left:0;
}

然后您的广告系列滚动列表将是一个固定内容容器，其高度为100％减去标题的高度，位于标题的底部并允许滚动

.scroll-campaign-list {
    position:fixed;
    top:55px;
    left:0;
    width:100%;
    height:calc(100% - 55px);
    overflow:scroll;
}

Here is a fiddle包含您的内容

Answer 5

我认为最好有不同的课程。所以我删除了.container类。

＆＃13;

 body.campaign-body {   height: 100%;  overflow-y: scroll; }
    .campaign-header { position: fixed; top: 0;
        z-index: 1000; background: #000; width: 100%; height: 55px; color:#fff;""}
    .scroll-campaign-list { margin-top: 95px; }

＆＃13;

 <body class="campaign-body">
      <div class="campaign-header">
        <div class="row admin-header">
            <div class="header-title">
                <h4 class="white-txt header-name">LISTING</h4>
            </div>
        </div>
     </div>
     <div class="scroll-campaign-list" id="campaigns-list">
        <div class="row campaigns">
            <div class="twelve columns list-items">
                <h5 class="white-txt campaign-name">Blah blah</h5>
                <p class="campaign-question grey-txt">Blah blah</p>
            </div>
        </div>
        <hr>
        <div class="row campaigns">
            <div class="twelve columns list-items">
                <h5 class="white-txt campaign-name">Blah blah</h5>
                <p class="campaign-question grey-txt">Blah blah</p>
            </div>
        </div>
        <hr><div class="row campaigns">
            <div class="twelve columns list-items">
                <h5 class="white-txt campaign-name">Blah blah</h5>
                <p class="campaign-question grey-txt">Blah blah</p>
            </div>
        </div>
        <hr><div class="row campaigns">
            <div class="twelve columns list-items">
                <h5 class="white-txt campaign-name">Blah blah</h5>
                <p class="campaign-question grey-txt">Blah blah</p>
            </div>
        </div>
        <hr><div class="row campaigns">
            <div class="twelve columns list-items">
                <h5 class="white-txt campaign-name">Blah blah</h5>
                <p class="campaign-question grey-txt">Blah blah</p>
            </div>
        </div>
        <hr><div class="row campaigns">
            <div class="twelve columns list-items">
                <h5 class="white-txt campaign-name">Blah blah</h5>
                <p class="campaign-question grey-txt">Blah blah</p>
            </div>
        </div>
        <hr><div class="row campaigns">
            <div class="twelve columns list-items">
                <h5 class="white-txt campaign-name">Blah blah</h5>
                <p class="campaign-question grey-txt">Blah blah</p>
            </div>
        </div>
        <hr><div class="row campaigns">
            <div class="twelve columns list-items">
                <h5 class="white-txt campaign-name">Blah blah</h5>
                <p class="campaign-question grey-txt">Blah blah</p>
            </div>
        </div>
        <hr><div class="row campaigns">
            <div class="twelve columns list-items">
                <h5 class="white-txt campaign-name">Blah blah</h5>
                <p class="campaign-question grey-txt">Blah blah</p>
            </div>
        </div>
        <hr>
     </div>
     </body>

＆＃13;

固定标题阻止内容如下

5 个答案: