Question

我无法使用javascript来调整导航栏徽标的大小。

我是Java的新手。

谢谢大家。

$(window).on("scroll", function() {
  var logo = document.getElementsByClassName("logo");
  if ($(window).scrollTop()) {
    $('nav').addClass('white');
    logo.style.width = '30px';
  } else {
    $('nav').removeClass('white');
    logo.style.width = '60px';
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<header>
  <nav>
    <div class="menu-icon">
      <i class="fa fa-bars fa-2x"></i>
    </div>
    <img src="assets/images/Logo.png" alt="logo" class="logo">

  </nav>

</header>

Answer 1

立即发现您正在使用ret方法，该方法返回一个数组。如果您正在使用JQuery，并且看起来像您一样，建议您说getElementsByClassName或将其更改为ID并使用logo = $('.logo');。

Answer 2

您可能不需要jquery

<script>
    let logo = document.querySelector('#logo')
    let nav = document.querySelector('#nav')
    if(window.scrollTop > 0){
    nav.classList.add('white')
    nav.style.width= "30px"
    }else{
    nav.classList.add('white')
    nav.style.width= "30px"
    }
</script>

并将ID添加到您的img标签中

<img id="logo" class="logo" src="..some.jpg" alt="some image">

在向下滚动时调整导航栏徽标的大小，JavaScript不起作用

2 个答案: