Question

好的，所以我有了这个JavaScript，它工作得非常好。

＆＃13;

var header = document.getElementById('header');

window.onscroll = function () {
    "use strict";
    if (document.body.scrollTop >= 6) {
        header.className = 'header-colored';
    } else {
        header.className = 'header-transparent';
    }
};

＆＃13;

但是当我在脚本中添加了另一个元素时，由于某种原因它停止了工作。在标题中停止工作保持透明，箭头始终可见。

所有相关代码（我相信）：

＆＃13;

var header = document.getElementById('header');
var arrow = document.getElementsById('arrowToTop');
window.onscroll = function () {
    "use strict";
    if (document.body.scrollTop >= 6) {
        header.className = 'header-colored';
        arrow.className = 'arrow-visible';
    } else {
        header.className = 'header-transparent';
        arrow.className = 'arrow-transparent';
    }
};

＆＃13;

#header {
    position: fixed;
}

.header-transparent {
    background-color: transparent;
}

.header-colored {
    background-color: black;
    opacity: .9;
}

.toTop {
    bottom: 0;
    right: 0;
    position: fixed;
}

  .arrow-visible {
    display: block;
}

.arrow-transparent {
    display: none;
}

＆＃13;

  <header id="header" class="header-transparent">
      <img src="Bilder/LOGO.png" alt="Blabla" style="width: 10%;">
         <ul id="navbar">
           <li><a href="#allText">home</a></li>
           <li><a href="#">business</a></li>
           <li><a href="#">technical</a></li>
           <li><a href="#">about us</a></li>
         </ul>
    </header>

  </div>
   <i class="material-icons" id="arrowToTop"><a class="toTop" href="#">keyboard_arrow_up</a></i>
  </div>

＆＃13;

当我添加一个新变量和两行额外代码时，是否有人知道脚本停止工作的原因？谢谢！

Answer 1

您对arrow的声明是复数。改变这个

  var arrow = document.getElementsById('arrowToTop');

要

 var arrow = document.getElementById('arrowToTop');

我不知道你是怎么没有得到错误的。它不是JS功能。

用于更改滚动元素外观的JavaScript

1 个答案: