滚动页眉隐藏在页面内容

Question

我设计的滚动标题存在问题，在特定页面上的内容后滚动。我指的具体页面包括带有onmouseover过滤器的图片。如果我删除控制图像过滤器的容器样式，标题将完全滚动内容。但是，我想保留该功能。最后一段详细说明了问题的根源。中间是我的所有代码。任何帮助将不胜感激！

以下是与我的滚动标题相关联的代码：

window.onscroll = function() {myFunction()};
    
    var header = document.getElementById("myHeader");
    var sticky = header.offsetTop;
    
    function myFunction() {
      if (window.pageYOffset > sticky) {
        header.classList.add("sticky");
    		document.getElementById("i1").width="80";
    		document.getElementById("i1").height="80";
    		document.getElementById("i2").style.fontSize="14px"
      } else {
        header.classList.remove("sticky");
    		document.getElementById("i1").width="120";
    		document.getElementById("i1").height="120";
    		document.getElementById("i2").style.fontSize="16px"
      }
    
    }

.header {background: rgba(255, 255, 255, .7);color: #f1f1f1;}
    .sticky {position: fixed;top: 0;width: 100%;}
    .sticky + .content {padding-top: 102px;}
    .center {margin-left: auto;margin-right: auto;}
    
 .container {position: relative;width: 900px;height: 650px;margin-left: auto;margin-right: auto;}
    
      .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 650px;
      width: 900px;
      opacity: 0;
      transition: .5s ease;
      background-color: black;}
    
    .container:hover .overlay{opacity: 0.5;}
    
    .text {
      color: white;
      font-size: 30px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      text-align: center;}  

<div class="header" id="myHeader">
        <table>
        <tr id="i2">
        	<th> <a href="inventory.htm">INVENTORY </a> </th>
        	<th> <a href="pastsales.htm">PAST SALES </a> </th>
        	<th> <a href="sell.htm"> SELLING</a> </th>
        	<th> <a href="index.htm"><img src="MOround.png" id="i1" alt="logo" width="120" height="120"></a></th>
        	<th> <a href="aboutus.htm">ABOUT US </a> </th>
        	<th> <a href="ContactUs.htm">CONTACT US</a> </th>
        	<th> <a href="events.htm">EVENTS</a> </th>
        	</tr>
        </table>
        </div>

<!-- When it scrolls on this page with containers it hides behind the content: -->

      <div class="container">
      <img src="GLA45pics/amg1.jpg" alt="GLA45AMG" height="650" width="900">
      <div class="overlay">
        <div class="text"><a href="gla45.htm">2015 Mercedes-Benz GLA45 AMG</a></div>
      </div>
      </div>
    
      <br>
      <div class="container">
      <img src="s2kpics/s2k1.jpg" alt="s2kcover" height="650" width="900">
      <div class="overlay">
        <div class="text"><a href="s2000.htm">COMING SOON: 2004 Honda S2000</a></div>
      </div>
      </div>



     

问题根源于.container div，特别是位置样式。但是，这是此页面的主要设计元素，我在其中添加了一个叠加到图片上，因此onmouseover过滤器覆盖图像与信息文本。我想保留这个功能，但我也希望我的滚动标题能够正常运行并滚动过滤后的图像，而不是在它们后面。