logo标签列表

粘性顶部透明背景

htmlcss
5
所以我的问题是，我希望我的粘性标题div有一个透明的背景，但只针对body标签的背景，这样滚动的内容就不会通过标题可见。换句话说，因为我在body标签中有一个背景图像，我也想在标题中看到它，但不想看到滚动内容，我想削减滚动内容的div可见性，使其与我的标题重合。我正在使用Bootstrap。对于我的粘性标题，我使用“position: sticky;”，在此处进行了描述：https://css-tricks.com/position-sticky-2/

enter image description here

<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>
我认为应该使用position:fixed;。 - Ashish sah
你能否将你的代码上传到任何编辑器，例如JSBin？你能解释一下你想要实现什么吗？ - Ashish sah
发生了什么错误？ - Ashish sah
4个回答
0
一个替代方案是使用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>

这并没有产生期望的结果，反而搞乱了我的页眉，将所有东西都对齐到页面的左侧。 - Jaak
0
添加一个background-color和一个比其他元素更高的z-index。
0
一个可以使用inherit来设置粘性标题的背景。
如果background-size设置为cover、contain等，可能还需要添加 background-attachment: fixed。 

document.getElementById('content').innerHTML = '<p>Lorem ipsum</p>'.repeat(100);
html, body {
  margin: 0 5px;
  color: #aaa;
  background-image: url('https://istack.dev59.com/HBQu4.webp');
  background-attachment: fixed;
  background-size: cover;
}
.header {
  margin: 0;
  position: sticky;
  top: 0;
  padding: 20px;
  border: 1px solid #888;
  background: inherit;
}
<h1 class="header">The Header</h1>
<div class="content" id="content"></div>

-1

在您的固定标题中，请使用background: transparent;而不是background-color。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接