JavaScript getElementById在手机上不起作用

Question

我正在创建一个包含一些JavaScript代码的网站。JavaScript在计算机上运行良好。但在我的iPhone 7上，getElementById函数不起作用。我试图设置img标记的源，但什么也没发生。

JavaScript:

var header_bar = $('.js-header-bar, .js-header-bar-mobile');
var header_bar_mobile = $('.js-header-bar-mobile');
var header_bar_navbar = header_bar_mobile.find('.navbar-primary');
var header_bar_toggler = header_bar_mobile.find('.navbar-toggler');
var header_bar_offsetTop =  header_bar.offset().top;
$(window).on('scroll', onScroll); 
function onScroll(){
if ($(this).scrollTop() > header_bar_offsetTop){
header_bar.addClass("sticky");
document.getElementById("headerLogo").src = "images/logo-black.png";

} else {
header_bar.removeClass("sticky");
document.getElementById('headerLogo').src = "images/logo-white.png";
}
}

该功能应该在网站的顶部添加一个黑色标志，如果我滚动一个白色标志。在电脑上可以，但在我的智能手机上不行。

HTML:

<header class="header header-mobile js-header-bar-mobile d-md-none">
<div class="header-bar">
<div class="header-bar-logo">
<a href="index.html">
<img class="originalTest" alt='Auto mit Schriftzug: "Autohandel-ZAR"' id="headerLogo" src="images/logo-white.png"/>
</a>
</div>
<div class="header-bar-menu">
<button class="navbar-toggler hamburger" type="button" id="js-header-toggle">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
</div>

提前谢谢。

Answer 1

为移动设备添加一个额外的事件侦听器：

$(document.body).on('touchmove', onScroll);

所以完整的代码应该看起来像：

var header_bar = $('.js-header-bar, .js-header-bar-mobile');
var header_bar_mobile = $('.js-header-bar-mobile');
var header_bar_navbar = header_bar_mobile.find('.navbar-primary');
var header_bar_toggler = header_bar_mobile.find('.navbar-toggler');
var header_bar_offsetTop =  header_bar.offset().top;
$(document.body).on('touchmove', onScroll);
$(window).on('scroll', onScroll); 
function onScroll(){
if ($(this).scrollTop() > header_bar_offsetTop){
header_bar.addClass("sticky");
document.getElementById("headerLogo").src = "images/logo-black.png";

} else {
header_bar.removeClass("sticky");
document.getElementById('headerLogo').src = "images/logo-white.png";
}
}

Answer 2

I通过用jQuery按类而不是按Id获取元素来解决问题所以问题出在Id部分。

工作代码：

function onScroll(){
if ($(this).scrollTop() > header_bar_offsetTop){
header_bar.addClass("sticky");
$(".logoHeader").attr("src", "images/logo-black.png");

} else {
header_bar.removeClass("sticky");
$(".logoHeader").attr("src", "images/logo-white.png");
}
}