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

Question

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

我是 Javascript 的新手。

谢谢你们。

 $(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

马上我看到您正在使用返回数组的getElementsByClassName方法。 如果您正在使用 JQuery，并且看起来您是这样，我建议您说logo = $('.logo'); 或将其更改为 id 并使用getElementById 。

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">