Question

我创建了一个js小提琴http://jsfiddle.net/claireC/8SUmn/，其中包含一个透明的固定标题。

当我滚动时，您可以看到文本在其后面向上滚动。如何在滚动时将文本消失或隐藏在透明div后面。

编辑：忘记提及背景是图像。

注意：我是编码的初学者。这是我玩代码并试图解决问题。

这是我的HTML：

<div class="container">

<header>
    <ul>
        <li>list one</li>
        <li>list3   </li>
        <li>list2</li>
    </ul>
</header>

<div class="text">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat sapien eget ligula egestas, quis aliquam velit varius. Phasellus mollis mollis sem quis porttitor. Pellentesque scelerisque mauris et magna tincidunt, vel pharetra enim pharetra. Duis a lobortis purus. Sed dignissim fermentum nibh convallis eleifend. In quis interdum arcu. Proin interdum, lorem et luctus laoreet, felis purus pharetra turpis, eu egestas justo ligula in lectus. Morbi vitae libero vel velit posuere luctus at eu diam. Duis tincidunt lectus ut lobortis euismod. Vivamus ultrices tristique sapien eget posuere.

    </p>
</div>

的CSS：

    header{
        width: 100%;
        position: fixed;
        top: 0;
        border: 1px solid #000;
    }

    .text{
        border: 1px solid #fff;
        position: relative;
        margin-top: 150px;
    }

    p{
        font-size: 150px;
    }

Answer 1

如果您可以设置标题高度，可以使用position:absolute和overflow:auto来获得结果

Demo

Answer 2

我找到了另一个解决方案，仅CSS：

使用背景制作容器div
具有 header 透明标签，并且height设置为10vh
将主体 height设置为90vh，将overflow设置为auto

对不起，它是React / MaterialUI，但是您将获得要点：

const classes = theme => ({
  container: {
    fontFamily: 'Roboto,"Helvetica Neue",Arial,sans-serif',
    margin: 0,
    padding: 0,
    minHeight: '100%',
    backgroundImage: 'url(/cargo-background.jpg)',
    backgroundSize: 'cover',
    backgroundAttachment: 'fixed',
  }
})

<div className={classes.container}>
    <div style={{height: '12vh'}}>
      <AppBar/>
    </div>
    <div style={{height: '88vh', overflow: 'auto'}}>
      <Routes/>
    </div>
</div>

有关vh（视口单位）的更多信息： https://caniuse.com/#feat=viewport-units

Answer 3

假设您的标题将像一个粘性菜单，在其下方显示背景图像-我认为如果没有标题/菜单后面的实际文本，实现起来会容易得多。相反，您最好进行固定布局的IMO，这是一个示例：

在标题和内容部分中，有一个全屏容器用于启动固定布局。您可以在此处使用flexbox来使内容部分填充空间但不会溢出，而标题高度取决于标题内容（因此，不必像人们所说的那样在标题上设置高度）。

.container {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: ghostwhite;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

header.menu {
  border: 1px solid #000;
}

section.text {
  border: 1px solid #fff;
  overflow-y: scroll
}

<div class="container">
  <header class="menu">
    <ul>
      <li>list one</li>
      <li>list3 </li>
      <li>list2</li>
    </ul>
  </header>
  <section class="text">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat sapien eget ligula egestas, quis aliquam velit varius. Phasellus mollis mollis sem quis porttitor. Pellentesque scelerisque mauris et magna tincidunt, vel pharetra enim pharetra.
      Duis a lobortis purus. Sed dignissim fermentum nibh convallis eleifend. In quis interdum arcu. Proin interdum, lorem et luctus laoreet, felis purus pharetra turpis, eu egestas justo ligula in lectus. Morbi vitae libero vel velit posuere luctus at
      eu diam. Duis tincidunt lectus ut lobortis euismod. Vivamus ultrices tristique sapien eget posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat sapien eget ligula egestas, quis aliquam velit varius. Phasellus mollis mollis
      sem quis porttitor. Pellentesque scelerisque mauris et magna tincidunt, vel pharetra enim pharetra. Duis a lobortis purus. Sed dignissim fermentum nibh convallis eleifend. In quis interdum arcu. Proin interdum, lorem et luctus laoreet, felis purus
      pharetra turpis, eu egestas justo ligula in lectus. Morbi vitae libero vel velit posuere luctus at eu diam. Duis tincidunt lectus ut lobortis euismod. Vivamus ultrices tristique sapien eget posuere.

    </p>
  </section>
</div>

滚动时如何让内容消失/隐藏在透明标题后面

3 个答案:

Demo