'Sticky header transparent background

So the problem for me is, that I would like to have my sticky header div have a transparent background, but only for the background of the body tag so that the scrolled content wouldn't be visible through the header. In other words, because I have a background image for my body tag, I would like to see it in my header as well, but not the scrolled content, I would like to cut the scrolled content divs visibility where my header is. I'm using Bootstrap. For my sticky header I'm using "position: sticky;" described here: 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 [email protected]? %>
  <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>

html css

Solution 1:^[1]

One alternative is to use position:fixed instead. Using it removes that element in the document flow, so other elements will flow over, like it is not there. What can you do is add another div that will act as the missing fixed element with the same height as the fixed element, like this:

.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>

Without .solution (for comparison):

.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>

Solution 2:^[2]

Use background: transparent; instead of background-color in your sticky header.

In this example mentioned in css-tricks article, use background: transparent; in dt and change color and properties as required.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Carl Binalla
Solution 2	Madan Bhandari

'Sticky header transparent background

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]