滚动行消失在具有透明背景的另一行后面

时间：2018-01-20 13:32:23

标签： html css material-design

我试图得到一个当它向上滚动时它会消失在一个充满文本的行后面。我遇到的问题是背景是图案化的，所以我不能只为文本行的背景着色，让另一行像往常一样滚动到它下面。有什么办法可以让滚动行在到达上面的行时消失吗？

＆＃13;
＆＃13; 
#main-container {
  width: 95%;
  height: 100%;
}

#title-text {
  margin-top: 5px;
  margin-bottom: 0px;
  font-size: 80px;
  color: black;
  font-family: "CallingAngelsPersonalUse";
  text-shadow: 4px 6px 12px #ooo;
}

#date-text {
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 45px;
  color: black;
  font-family: "Strawberry_Whipped_Cream";
  text-shadow: 2px 4px 6px #fff;
}

#title-text-small {
  background:inherit;
  margin-top: 10px;
  margin-bottom: -15px;
  font-size: 12vw;
  color: black;
  font-family: "CallingAngelsPersonalUse";
  text-shadow: 4px 6px 12px #fff;
}

#date-text-small {
  background:inherit;
  margin-top: 0px;
  margin-bottom: -15px;
  font-size: 10vw;
  color: black;
  font-family: "Strawberry_Whipped_Cream";
  text-shadow: 2px 4px 6px #fff;
}

#title-row-small {
  width: 100%;
  z-index: 100;
  background:inherit;
  position: fixed;
}

#title-container-small {
  background:inherit;
  width: 100%;
}

@media screen and (max-width: 479px) {
  #card-row {
    top: 180px;
    position: relative;
    overflow: hidden;
    bottom: -180px;
    z-index: 99999;
  }
  #card-container {
    overflow: hidden;
  }
}

@media only screen and (min-width: 480px){
  #card-row {
    top: 50px;
    position: relative;
    overflow: hidden;
  }
}

@media only screen and (min-width: 1200px){
  #card-row {
    top: 10px;
    position: relative;
    overflow: hidden;
  }
}

#modal-title {
  margin-top: 20px;
  margin-left: 10px;
  font-family: "Strawberry_Whipped_Cream";
  font-size: 4vw;
}

#modal-text {
  margin-top: 10px;
  margin-left: 10px;
  font-family: "OpenSans-Regular";
  font-size: 4vw;
}

#card-title {
  font-family: "OpenSans-Regular";
  left: -10px;
  bottom: -20px;
}

#button {
  font-family: "OpenSans-Regular";
  margin-top: 10px;
  margin-bottom: -15px;
}

#map {
  width: 100%;
  height: 400px;
}

#map-image {
  width: 100%;
  height: auto;
}

#map-image-text {
  text-align: center;
  margin-top: 10px;
  font-family: "OpenSans-Regular";
}

#confetti-link {
  margin-top: 10px;
  margin-left: 10px;
  font-family: "OpenSans-Regular";
}

.modal {
  position: fixed;
  left:0;
  right:0;
  max-height:80%;
  height: 80%;
  width: 99%;
  margin: auto;
}

.modal-content {
  height:90%;
  padding:0;
  overflow: auto;
}

.modal-footer {
  bottom: 0px;
  overflow-y: scroll;

}
＆＃13; 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<div id="main-container" class="container">
  <div class="row">
    <div class="container center">
      <div class="show-on-medium-and-up hide-on-small-only">
        <p id="title-text">Scott and Viki</p>
        <p id="date-text">23/06/18</p>
        <a id="button" class="black waves-effect waves-light btn z-depth-3" href="mailto:scottandviki@gmail.com?subject=Wedding%20R.S.V.P"><i class="material-icons right">email</i>R.S.V.P</a>
      </div>
    </div>
  </div>
  <div id="title-row-small" class="row">
    <div class="container center">
      <div id="title-container-small" class="col s12 show-on-small-only hide-on-med-and-up">
        <p id="title-text-small">Scott and Viki</p>
        <p id="date-text-small">23/06/18</p>
        <a id="button" class="black waves-effect waves-light btn z-depth-3" href="mailto:scottandviki@gmail.com?subject=Wedding%20R.S.V.P"><i class="material-icons right">email</i>R.S.V.P</a>
      </div>
    </div>
  </div>
  <!-- Agenda Card -->
  <div id="card-row" class="row">
    <div class="col s12 m6 l6 xl4">
      <a href="#" onclick="$('#agenda-modal').modal('open');">
        <div class="card">
          <div class="card-image">
            <img src="http://lorempixel.com/400/200/sports" class="z-depth-4">
            <span id="card-title" class="card-title">Agenda</span>
          </div>
        </div>
      </a>
    </div>
    <!-- Map Card -->
    <div class="col s12 m6 l6 xl4">
      <a href="#" onclick="$('#map-modal').modal('open');">
        <div class="card">
          <div class="card-image">
            <img src="http://lorempixel.com/400/200/sports" class="z-depth-4">
            <span id="card-title" class="card-title">Map</span>
          </div>
        </div>
      </a>
    </div>
    <!-- Confetti Card -->
    <div class="col s12 m6 l6 xl4">
      <a href="#" onclick="$('#confetti-modal').modal('open');">
        <div class="card">
          <div class="card-image">
            <img src="http://lorempixel.com/400/200/sports" class="z-depth-4">
            <span id="card-title" class="card-title">Confetti</span>
          </div>
        </div>
      </a>
    </div>
    <!-- Hotels & Taxi's Card -->
    <div class="col s12 m6 l6 xl4">
      <a href="#" onclick="$('#hotel-modal').modal('open');">
        <div class="card">
          <div class="card-image">
            <img src="http://lorempixel.com/400/200/sports" class="z-depth-4">
            <span id="card-title" class="card-title">Hotels & Taxi's</span>
          </div>
        </div>
      </a>
    </div>
    <!-- Children Card -->
    <div class="col s12 m6 l6 xl4">
      <a href="#" onclick="$('#children-modal').modal('open');">
        <div class="card">
          <div class="card-image">
            <img src="http://lorempixel.com/400/200/sports" class="z-depth-4">
            <span id="card-title" class="card-title">Children</span>
          </div>
        </div>
      </a>
    </div>
    <!-- Camping Card -->
    <div class="col s12 m6 l6 xl4">
      <a href="#" onclick="$('#camping-modal').modal('open');">
        <div class="card">
          <div class="card-image">
            <img src="http://lorempixel.com/400/200/sports" class="z-depth-4">
            <span id="card-title" class="card-title">Camping</span>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

这可能吗？目前，当我滚动时，您可以看到文本背后看起来不太好的卡片。

以下是该网站的图片：enter image description here

2 个答案:

答案 0 :(得分：1)

我提出了另一个解决方案

您必须将overflow:hidden和height:100%设置为#main-container，然后将overflow:scroll应用于#card-row

Working Fiddle

答案 1 :(得分：0)

只需将背景应用于固定定位的#card-row div。

Stack Snippet

＆＃13;
＆＃13; 
#title-row-small {
  width: 100%;
  z-index: 100;
  position: fixed;
  background: #fff;
  top: 0;
  padding: 20px;
}

#card-row {
  top: 180px;
  position: relative;
  overflow: hidden;
  bottom: -180px;
}
＆＃13; 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

<div id="main-container" class="container">
  <div class="row">
    <div class="container center">
      <div class="show-on-medium-and-up hide-on-small-only">
        <p id="title-text">Scott and Viki</p>
        <p id="date-text">23/06/18</p>
        <a id="button" class="black waves-effect waves-light btn z-depth-3" href="mailto:scottandviki@gmail.com?subject=Wedding%20R.S.V.P"><i class="material-icons right">email</i>R.S.V.P</a>
      </div>
    </div>
  </div>
  <div id="title-row-small" class="row">
    <div class="container center">
      <div id="title-container-small" class="col s12 show-on-small-only hide-on-med-and-up">
        <p id="title-text-small">Scott and Viki</p>
        <p id="date-text-small">23/06/18</p>
        <a id="button" class="black waves-effect waves-light btn z-depth-3" href="mailto:scottandviki@gmail.com?subject=Wedding%20R.S.V.P"><i class="material-icons right">email</i>R.S.V.P</a>
      </div>
    </div>
  </div>
  <!-- Agenda Card -->
  <div id="card-row" class="row">
    <div class="col s12 m6 l6 xl4">
      <a href="#" onclick="$('#agenda-modal').modal('open');">
        <div class="card">
          <div class="card-image">
            <img src="http://lorempixel.com/400/200/sports" class="z-depth-4">
            <span id="card-title" class="card-title">Agenda</span>
          </div>
        </div>
      </a>
    </div>
    <!-- Map Card -->
    <div class="col s12 m6 l6 xl4">
      <a href="#" onclick="$('#map-modal').modal('open');">
        <div class="card">
          <div class="card-image">
            <img src="http://lorempixel.com/400/200/sports" class="z-depth-4">
            <span id="card-title" class="card-title">Map</span>
          </div>
        </div>
      </a>
    </div>
    <!-- Confetti Card -->
    <div class="col s12 m6 l6 xl4">
      <a href="#" onclick="$('#confetti-modal').modal('open');">
        <div class="card">
          <div class="card-image">
            <img src="http://lorempixel.com/400/200/sports" class="z-depth-4">
            <span id="card-title" class="card-title">Confetti</span>
          </div>
        </div>
      </a>
    </div>
    <!-- Hotels & Taxi's Card -->
    <div class="col s12 m6 l6 xl4">
      <a href="#" onclick="$('#hotel-modal').modal('open');">
        <div class="card">
          <div class="card-image">
            <img src="http://lorempixel.com/400/200/sports" class="z-depth-4">
            <span id="card-title" class="card-title">Hotels & Taxi's</span>
          </div>
        </div>
      </a>
    </div>
    <!-- Children Card -->
    <div class="col s12 m6 l6 xl4">
      <a href="#" onclick="$('#children-modal').modal('open');">
        <div class="card">
          <div class="card-image">
            <img src="http://lorempixel.com/400/200/sports" class="z-depth-4">
            <span id="card-title" class="card-title">Children</span>
          </div>
        </div>
      </a>
    </div>
    <!-- Camping Card -->
    <div class="col s12 m6 l6 xl4">
      <a href="#" onclick="$('#camping-modal').modal('open');">
        <div class="card">
          <div class="card-image">
            <img src="http://lorempixel.com/400/200/sports" class="z-depth-4">
            <span id="card-title" class="card-title">Camping</span>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题