我创建了一个导航栏，并使用粘性来修复网页顶部的导航栏。问题是，当粘性被激活时，它会将图像推到它下面一点。我如何防止这种情况发生？我认为问题是因为我如何使用位置属性的差异，但我有一个类似的代码，是没有问题的工作。此外，将有助于如果任何人都可以分享如何使粘性过渡顺利和无缝。我附上部分代码相同

window.onscroll = function() {
  myFunction()
};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }

.main-navbar {
  display: inline-flex;
  width: 100%;
  max-width: 800px;
  position: relative;
  padding-bottom: 17px;
  left: 20%;
  top: 0px;
}

/*Code for Sticky*/

.sticky {
  position: fixed;
  top: 10px;
  background-color: white;
  z-index: 99999999;
  transition: 0.3s top ease-in-out;
  -webkit-transition: 0.3s top ease-in-out;
  -moz-transition: 0.3s top ease-in-out;
  -ms-transition: 0.3s ease-in-out;
  -o-transition: 1s ease-in-out;
  animation: faceInEffect 0.3s;
  -webkit-animation: faceInEffect 0.3s;
  box-shadow: -1px 2px 4px rgb(110, 109, 109);
}

@keyframes faceInEffect {
  from {
    top: 0px;
  }
  to {
    top: 10px;
  }
}

.hero>img {
  position: relative;
  top: 6.7rem;
  left: 4.5rem;
}

<div class="main-navbar" id="navbar">
  <nav>
    <ul class="nav-list">
      <li class="dropdown-item-1">
        <a href="">Men</a>
        <ul class="sub-menu">
          <li><a href="#">shirts</a> </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>


<div class="contentforscroll>

 src=" https://static.nike.com/a/images/f_auto/dpr_1.0,cs_srgb/w_906,c_limit/83f15213-514a-4963-a765-74c379b89a34/nike-just-do-it.png "
        alt=" " style="width: 1300px; ">
<img  src="https://static.nike.com/a/images/f_auto/dpr_1.0,cs_srgb/w_906,c_limit/83f15213-514a-4963-a765-74c379b89a34/nike-just-do-it.png "
        alt=" " style="width: 1300px; ">></img>
</div>