css 粘滞页眉透明背景

9rbhqvlz  于 2023-01-03  发布在  其他
关注(0)|答案(2)|浏览(160)

所以我的问题是，我希望我的粘性标题div有一个透明的背景，但只为body标签的背景，这样滚动的内容就不会通过标题可见。换句话说，因为我有一个body标签的背景图像，我希望它也能在我的标题中看到，但不是滚动的内容，我想削减滚动内容div的可见性，我的头在哪里。我用Bootstrap。我的粘性头我用“位置：粘性;”描述如下：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>
css

2条答案

按热度按时间
1l5u6lss

1l5u6lss1#

一种替代方法是使用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（用于比较）：
一个二个一个一个

赞(0）分享  回复(0）举报  2023-01-03
eqfvzcg8

eqfvzcg82#

使用background: transparent;而不是背景色在您的粘性标题。
在css-tricks文章中提到的this example中，在dt中使用background: transparent;，并根据需要更改颜色和属性。

赞(0）分享  回复(0）举报  2023-01-03
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com