粘页眉透明背景

Question

所以对我来说问题是，我想让我的粘性标题 div 有一个透明的背景，但仅限于 body 标签的背景，这样滚动的内容就不会通过标题可见。换句话说，因为我的 body 标签有一个背景图像，我也想在我的标题中看到它，但不是滚动内容，我想在我的标题所在的位置剪切滚动内容 div 的可见性。我正在使用引导程序。对于我的粘性标题，我使用“位置：粘性；”此处描述：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>

Answer 2

在您的置顶标题中使用background: transparent; 而不是背景色。

在css-tricks文章中提到的this example中，使用dt中的background: transparent;，并根据需要更改颜色和属性。