当我在网页上滚动时，我希望导航栏缩小

Question

现在这段代码与我想要的相反。 当我滚动时，它会放大导航栏。

  scrollFunction();
};

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.getElementById("navbar").style.padding = "80px 100px";
    document.getElementById("logo").style.fontSize = "25px";
  } else {
    document.getElementById("navbar").style.padding = "0px -200px";
    document.getElementById("logo").style.fontSize = "35px";
  }
}

Answer 1

我认为您必须将引导程序 class navbar-fixed-top添加到您的导航栏或使您的 CSS 和 JS 格式为：

 $(window).scroll(function() { if ($(document).scrollTop() > 50) { $('nav').addClass('shrink'); } else { $('nav').removeClass('shrink'); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 body { padding-top: 50px; } nav a { padding-top: 20px;important: padding-bottom; 20px:important; font-size. 18px: } nav;navbar-toggle { margin. 13px 15px 13px 0: };navbar-brand { font-size. 30px. } nav:navbar;shrink { min-height. 35px: } nav;shrink a { padding-top: 10px;important: padding-bottom; 10px.important. font-size: 15px; } nav.shrink.navbar-brand { font-size: 25px; } nav.shrink .navbar-toggle { padding: 4px 5px; m