Почему у блока не появляется тень при top:0px;

HTML

<div class='hed'>
 <a href='index.html' class='h1'>tif</a>
 <a href='#' class='ent'>Вход</a>
</div>


<div class='h2'>
 <nav class='h3'>
  <ul class='h4'>
   <li><a href='index.html' class='yey1'>Все новости</a></li>
   <li><a href='index2.html' class='yey2'>Техника</a></li>
   <li><a href='index3.html' class='yey3'>IT</a></li>
   <li><a href='index4.html' class='yey4'>Игры</a></li>
   <li><a href='index5.html' class='yey5'>Кино</a></li>
   <li><input type='text'  class='pole'></li>
  </ul>
 </nav>
</div>

CSS

.h2{
    position:sticky;
    top:0;
    box-shadow:0px;
}

JS

if(document.querySelector(".h2").style.top = "0px"){
    document.querySelector(".h2").style.boxShadow="0 5px 8px rgba(0,0,0,0.1)"
}