Javascript 带有居中徽标的自定义引导导航栏

我正试图用一个居中的标志和阴影效果来重现这一点

我已经设法让JS效果在图像在滚动时收缩的地方工作

我已经走了这么远，但我如何定位图像，使其位于导航的中心

另外，如何在导航栏和图像下创建阴影

HTML

JS

window.onscroll=function（）{
growshrinkogo（）
};
var Logo=document.getElementById（“Logo”）；
var endOfDocumentTop=150；
变量大小=0；
函数growshrinkogo（）{
var scroll=window.pageYOffset | | | document.documentElement.scrollTop | | | document.body.scrollTop | | 0；
如果（大小==0&&scroll>endOfDocumentTop）{
Logo.className='smallLogo'；
尺寸=1；
}否则，如果（大小==1&&scroll您需要添加
右：0；左：0；边距：0自动；
以将图像对齐到中心位置。此外，使用
框阴影
属性为导航栏和图像添加阴影


window.onscroll=function（）{
growshrinkogo（）
};
var Logo=document.getElementById（“Logo”）；
var endOfDocumentTop=150；
变量大小=0；
函数growshrinkogo（）{
var scroll=window.pageYOffset | | | document.documentElement.scrollTop | | | document.body.scrollTop | | 0；
如果（大小==0&&scroll>endOfDocumentTop）{
Logo.className='smallLogo'；
尺寸=1；
}else if（size==1&&滚动阴影：水平中心：谢谢毗湿奴-看起来很棒！很高兴帮助..编码愉快！
    <nav class="navbar navbar-expand-lg sticky-top navbar-light bg-light 
    flex-column">
  <div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
<div class="navbar-collapse collapse" id="navbarNav">
  <ul class="navbar-nav nav-fill w-100">
    <li class="nav-item active align-self-center">
      <a class="nav-link" href="#">About<span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item align-self-center">
      <a class="nav-link" href="#">Books</a>
    </li>
    <li class="nav-item">
      <a class="navbar-brand mx-auto" href="index.html"> <img src="https://placeimg.com/640/480/any" class="largeLogo" id="Logo" alt="Star Books"></a>
    </li>
    <li class="nav-item align-self-center">
      <a class="nav-link" href="#">Book Club</a>
    </li>
    <li class="nav-item align-self-center">
      <a class="nav-link" href="#">Contact</a>
    </li>
  </ul>
   </div>
 </div>
</nav>

#Logo {
  position: absolute;
  transition: all 0.5s;
  border-radius: 50%;
}

 .largeLogo {
   width: 200px;
}

 .smallLogo {
   width: 100px;
}

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

var Logo = document.getElementById("Logo");
var endOfDocumentTop = 150;
var size = 0;

function growShrinkLogo() {
  var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

  if (size == 0 && scroll > endOfDocumentTop) {
    Logo.className = 'smallLogo';
    size = 1;
  } else if (size == 1 && scroll <= endOfDocumentTop) {
    Logo.className = 'largeLogo';
    size = 0;
  }
}