粘性标题透明背景

Question

所以对我来说问题是，我想让我的粘性标题 div 有一个透明的背景，但仅限于 body 标签的背景，这样滚动的内容就不会通过标题可见。换句话说，因为我的 body 标签有一个背景图像，所以我也希望在标题中看到它，但不是滚动的内容，所以我想在标题所在的位置剪切滚动内容 div 的可见性。我正在使用引导程序。对于我的粘性标题，我使用“position：sticky;” 此处描述： https: //css-tricks.com/position-sticky-2/

<div style="position: -webkit-sticky; position: sticky; top: 0;">
  <h1 class="text-center">Dictionary</h1>

  <div class="text-center">  
    <% line_size = (@letter_array.length * 5 / 7).ceil %>
    <% (0...line_size).each do | letter | %>
      <form action="<%= "/dictionary/#{@letter_array[letter]}" %>" style="display: inline-block" method="post">
        <input type="hidden" name="_method" value="get" />

        <div>
          <label for="<%= "#{@letter_array[letter]}-link" %>" class="btn" style="padding: 0; margin: 0;"><h4 style="line-height: 0px;"><%= "#{@letter_array[letter].upcase}" %><h4/></label>
          <input id="<%= "#{@letter_array[letter]}-link" %>" type="submit" value="Delete" class="btn btn-link hidden"/>    
        </div>
      </form>
    <% end %>
  </div>

  <div class="text-center">
    <% (line_size...@letter_array.length).each do | letter | %>
      <form action="<%= "/dictionary/#{@letter_array[letter]}" %>" style="display: inline-block" method="post">
        <input type="hidden" name="_method" value="get" />

        <div>
          <label for="<%= "#{@letter_array[letter]}-link" %>" class="btn" style="border: 0; padding: 0; margin-top: -2px; margin-left: 0.25em; line-height: normal !important"><h4 style="line-height: 0px;"><%= "#{@letter_array[letter].upcase}" %><h4/></label>
          <input id="<%= "#{@letter_array[letter]}-link" %>" type="submit" value="Delete" class="btn btn-link hidden" style="border: 0; padding: 0; margin-top: -2px; line-height: normal !important"/>    
        </div>
      </form>
    <% end %>
  </div>

  <h5 class="text-center" style="margin-top: 0.25em; margin-bottom: 2em"><a href="<%= "/dictionary/new" %>">Add a New Word to Dictionary</a></h5>
</div>

<% if !@words.nil? %>
  <div class="table-responsive"> 
    <table class="table" style="width: auto !important;" align="center">
      <thead>
        <% word = @words[0] %>
        <tr>
          <td>
            <a href="<%= "/dictionary/#{@letter}/#{word.text}" %>">
              <%= "#{Word.int} - #{word.text}" %>
            </a>
          </td>
          <td>
            <form action="<%= "/dictionary/#{@letter}/#{word.text}/edit" %>" method="post">
              <input type="hidden" name="_method" value="get" />
              <div>
                <label for="<%= "#{word.text}-edit" %>" class="btn" style="border: 0; padding: 0; margin-top: -2px; line-height: normal !important"><i class="fa fa-pencil" aria-hidden="true"></i></label>
                <input id="<%= "#{word.text}-edit" %>" type="submit" value="Delete" class="btn btn-link hidden" style="border: 0; padding: 0; margin-top: -2px; line-height: normal !important"/>    
              </div>
            </form>
          </td>
          <td>
            <form action="<%= "/dictionary/#{@letter}/#{word.text}" %>" method="post">
              <input type="hidden" name="_method" value="delete" />
              <div>
                <label for="<%= "#{word.text}-delete" %>" class="btn" style="border: 0; padding: 0; margin-top: -2px; line-height: normal !important"><i class="fa fa-trash-o" aria-hidden="true"></i></label>
                <input id="<%= "#{word.text}-delete" %>" type="submit" value="Delete" class="btn btn-link hidden" style="border: 0; padding: 0; margin-top: -2px; line-height: normal !important"/>
              </div>
            </form>
          </td>        
        </tr>
      </thead>
      <tbody id="demo">
        <% @words[1, Word.words_const - 1].each do |word| %>
          <tr>
            <td>
              <a href="<%= "/dictionary/#{@letter}/#{word.text}" %>">
                <%= "#{Word.int} - #{word.text}" %>
              </a>
            </td>
            <td>
              <form action="<%= "/dictionary/#{@letter}/#{word.text}/edit" %>" method="post">
                <input type="hidden" name="_method" value="get" />
                <div>
                  <label for="<%= "#{word.text}-edit" %>" class="btn" style="border: 0; padding: 0; margin-top: -2px; line-height: normal !important"><i class="fa fa-pencil" aria-hidden="true"></i></label>
                  <input id="<%= "#{word.text}-edit" %>" type="submit" value="Delete" class="btn btn-link hidden" style="border: 0; padding: 0; margin-top: -2px; line-height: normal !important"/>    
                </div>
              </form>
            </td>
            <td>
              <form action="<%= "/dictionary/#{@letter}/#{word.text}" %>" method="post">
                <input type="hidden" name="_method" value="delete" />
                <div>
                  <label for="<%= "#{word.text}-delete" %>" class="btn" style="border: 0; padding: 0; margin-top: -2px; line-height: normal !important"><i class="fa fa-trash-o" aria-hidden="true"></i></label>
                  <input id="<%= "#{word.text}-delete" %>" type="submit" value="Delete" class="btn btn-link hidden" style="border: 0; padding: 0; margin-top: -2px; line-height: normal !important"/>
                </div>
              </form>
            </td>        
          </tr>
        <% end %>


      <!--<% @words.drop(1).each do |word| %>
        <tr>
          <td>
            <a href="<%= "/dictionary/#{@letter}/#{word.text}" %>">
              <%= "#{word.text}" %>
            </a>
          </td>
          <td>
            <form action="<%= "/dictionary/#{@letter}/#{word.text}/edit" %>" method="post">
              <input type="hidden" name="_method" value="get" />
              <div>
                <label for="<%= "#{word.text}-edit" %>" class="btn" style="border: 0; padding: 0; margin-top: -2px; line-height: normal !important"><i class="fa fa-pencil" aria-hidden="true"></i></label>
                <input id="<%= "#{word.text}-edit" %>" type="submit" value="Delete" class="btn btn-link hidden" style="border: 0; padding: 0; margin-top: -2px; line-height: normal !important"/>    
              </div>
            </form>
          </td>
          <td>
            <form action="<%= "/dictionary/#{@letter}/#{word.text}" %>" method="post">
              <input type="hidden" name="_method" value="delete" />
              <div>
                <label for="<%= "#{word.text}-delete" %>" class="btn" style="border: 0; padding: 0; margin-top: -2px; line-height: normal !important"><i class="fa fa-trash-o" aria-hidden="true"></i></label>
                <input id="<%= "#{word.text}-delete" %>" type="submit" value="Delete" class="btn btn-link hidden" style="border: 0; padding: 0; margin-top: -2px; line-height: normal !important"/>
              </div>
            </form>
          </td>        
        </tr>
      <% end %>-->
      </tbody>
    </table>
  </div>
<% end %>


<script>
window.onscroll = function() {scrollFunction()};
var door_key = 1;

function getDocHeight() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

function scrollFunction() {
    if (window.pageYOffset + window.outerHeight > getDocHeight() - 100) {
      if (door_key === 1) {
        door_key = 0;
        loadDoc();
      }
    } else {
        door_key = 1;
    }
}

function loadDoc(letter) {
  var xhttp;
  if (window.XMLHttpRequest) {
    // code for modern browsers
    xhttp = new XMLHttpRequest();
    } else {
    // code for IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML +=
      this.responseText;
    }
  };
  xhttp.open("GET", "/abc", true);
  xhttp.send();
}
</script>

Answer 1

一种替代方法是使用position:fixed。使用它会删除文档流中的该元素，因此其他元素将会溢出，就像它不存在一样。您能做的就是添加另一个div充当缺失的固定元素，其高度与固定元素相同，如下所示：

.fixed {
  width: 100%;
  text-align: center;
  position: fixed;
  height: 70px;
  background-color: pink;
}

.solution {
  height: 70px;
}

.content {
  width: 100%;
  height: 300px;
}

<body>
  <div class="fixed">
    <h1>HEADER</h1>
  </div>
  <div class="solution"></div>
  <div class="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</body>

没有.solution （用于比较）：

.fixed {
  width: 100%;
  text-align: center;
  position: fixed;
  height: 70px;
  background-color: pink;
}

.content {
  width: 100%;
  height: 300px;
}

<body>
  <div class="fixed">
    <h1>HEADER</h1>
  </div>
  <div class="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</body>