Javascript网站标题 - 隐藏向下滚动功能"Uncaught TypeError: header is null"错误 - Javascript website header - hide on scroll down function "Uncaught TypeError: header is null" error 小贝子编程网

我正在尝试实现滚动效果上的显示/隐藏标题。

我收到错误"；未捕获类型错误：标头为空"；在控制台上滚动页面时。

我已经尝试在正文底部添加js脚本src，但仍然得到相同的错误

我不确定问题是什么，希望有人能帮助我们了解一下可能发生的事情D:

希望文档对您有所帮助。

window.onload = (function(){
var doc = document.documentElement;
var w   = window;
/*
define four variables: curScroll, prevScroll, curDirection, prevDirection
*/
var curScroll;
var prevScroll = w.scrollY || doc.scrollTop;
var curDirection = 0;
var prevDirection = 0;
/*
how it works:
-------------
create a scroll event listener
create function to check scroll position on each scroll event,
compare curScroll and prevScroll values to find the scroll direction
scroll up - 1, scroll down - 2, initial - 0
then set the direction value to curDirection
compare curDirection and prevDirection
if it is different, call a function to show or hide the header
example:
step 1: user scrolls down: curDirection 2, prevDirection 0 > hide header
step 2: user scrolls down again: curDirection 2, prevDirection 2 > already hidden, do nothing
step 3: user scrolls up: curDirection 1, prevDirection 2 > show header
*/
var header = document.getElementById("header");
var toggled;
var threshold = 200;
var checkScroll = function() {
curScroll = w.scrollY || doc.scrollTop;
if(curScroll > prevScroll) {
// scrolled down
curDirection = 2;
}
else {
//scrolled up
curDirection = 1;
}
if(curDirection !== prevDirection) {
toggled = toggleHeader();
}
prevScroll = curScroll;
if(toggled) {
prevDirection = curDirection;
}
};
var toggleHeader = function() { 
toggled = true;
if(curDirection === 2 && curScroll > threshold) {
header.classList.add("hide");
}
else if (curDirection === 1) {
header.classList.remove("hide");
}
else {
toggled = false;
}
return toggled;
};
window.addEventListener("scroll", checkScroll);
})();

下面是HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<header id="header" class="header">
<nav class="navigation-bar">
<div class="menu-grid-container">
<div class="menu-popup">
<ul class="menu-popup-items">
<li>SOME BRAND TEXT</li>
<li>SOME BRAND TEXT</li>
<li>SOME BRAND TEXT</li>
<li>SOME BRAND TEXT</li>
</ul>
</div>
<div class="menu-grid-top">
<div class="menu-grid-top-container">
<a href="#" class="header-logo">
<img src="https://cdn.shopify.com/s/files/1/1097/6560/files/165px_trans_white_logo.png?v=1616495772" alt="" style="width:165px;height:83px;">
</a>
<div class="search_wrap search_wrap_4">
<div class="search_box">
<div class="btn btn_common">
<i class="fas fa-search"></i>
</div>
<input type="text" class="input" placeholder="search..." style="border:none">
</div>
</div>
<div class="header-buttons">
<a href="#" class="header-account-button">
<span>
<svg class="svg-account" viewBox="0 0 14 18" xmlns="http://www.w3.org/2000/svg">
<path d="M2.917 5.4c0-2.322 1.828-4.2 4.083-4.2s4.083 1.878 4.083 4.2c0 2.316-1.828 4.2-4.083 4.2S2.917 7.716 2.917 5.4zm6.651 4.704A5.415 5.415 0 0 0 12.25 5.4C12.25 2.418 9.9 0 7 0S1.75 2.418 1.75 5.4a5.415 5.415 0 0 0 2.682 4.704C1.838 11.16 0 13.758 0 16.8V18h1.167v-1.2c0-3.318 2.611-6 5.833-6 3.221 0 5.833 2.682 5.833 6V18H14v-1.2c0-3.042-1.838-5.64-4.432-6.696z" fill="#FFF" fill-rule="evenodd">
</path>
</svg>
</span>

</a>
<a href="#" class="header-cart-button">
<span>
<svg class="svg-basket" viewBox="0 0 23 18" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs><path id="a" d="M0 0h23.037v17.063H0z"></path></defs><g fill="none" fill-rule="evenodd">
<mask id="b" fill="#fff;"><use xlink:href="#a"></use></mask>
<path d="M20.91 8.78h-4.64V6h5.572l-.932 2.78zm-1.268 3.78H16.27V9.78h4.305l-.933 2.78zm-1.174 3.503H16.27V13.56h3.037l-.84 2.504zm-10.702 0h7.504V13.56H7.766v2.504zM3.729 13.56h3.037v2.504H4.569l-.84-2.504zm3.037-3.78v2.78H3.394l-.932-2.78h4.304zm0-3.779v2.78h-4.64L1.196 6h5.57zm1 6.56h7.504V9.78H7.766v2.78zm0-3.78h7.504V6H7.766v2.78zm0-6.863c0-.506.412-.917.917-.917h5.67c.506 0 .917.411.917.917V5H7.766V1.917zm15.177 3.291A.5.5 0 0 0 22.537 5H16.27V1.917A1.92 1.92 0 0 0 14.353 0h-5.67a1.92 1.92 0 0 0-1.917 1.917V5H.5a.498.498 0 0 0-.474.659l3.71 11.063a.501.501 0 0 0 .474.341H18.827a.501.501 0 0 0 .474-.34l3.71-11.064a.5.5 0 0 0-.068-.45z" fill="#FFF"></path>
</g>
</svg>
</span>
</a>
</div>
</div>
</div>
<div class="menu-grid-bottom">
<nav class="navigation">
<ul class="menu-items">
<li><a href="#" class="menu-item">MENU ITEM</a>
<div class="mega-menu">
<div class="content">
<div class="col">
<section>
<h2>Section 1</h2>
<ul class="mega-links">
<li><a href="#"></a>Menu Item</li>
<li><a href="#"></a>Menu Item</li>
<li><a href="#"></a>Menu Item</li>
<li><a href="#"></a>Menu Item</li>
</ul>
</section>
</div>
<div class="col">
<section>
<h2>Section 2</h2>
<ul class="mega-links">
<li><a href="#"></a>Menu Item</li>
<li><a href="#"></a>Menu Item</li>
<li><a href="#"></a>Menu Item</li>
<li><a href="#"></a>Menu Item</li>
</ul>
</section>
</div>
<div class="col">
<section>
<h2>Section 3</h2>
<ul class="mega-links">
<li><a href="#"></a>Menu Item</li>
<li><a href="#"></a>Menu Item</li>
<li><a href="#"></a>Menu Item</li>
<li><a href="#"></a>Menu Item</li>
</ul>
</section>
</div>
</div>
<div class="mega-menu-bottom">
<div class="image-container">
<a href="#" class="mega-menu-image">
<img src="https://picsum.photos/500/100?grayscale" alt="">
</a>
<a href="#" class="mega-menu-image">
<img src="https://picsum.photos/500/100?grayscale" alt="">
</a>
<a href="#" class="mega-menu-image">
<img src="https://picsum.photos/500/100?grayscale" alt="">
</a>
</div>
</div>
</div>
<div class="mega-menu_bg"></div>
</li>
<li><a href="#" class="menu-item-2">MENU ITEM</a></li>
<li><a href="#" class="menu-item-3">MENU ITEM</a></li>
<li><a href="#" class="menu-item-4">MENU ITEM</a></li>
<li><a href="#" class="menu-item-5">MENU ITEM</a></li>
<li><a href="#" class="menu-item-6">MENU ITEM</a></li>
<li><a href="#" class="menu-item-7">MENU ITEM</a></li>
</ul>
</nav>
</div>
</div>
</nav>
</header>
<section class="section">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque molestiae sit voluptate dicta iusto, a eligendi deserunt dolor quas consectetur nisi culpa fugiat omnis ut illum quod minima voluptas tenetur?</h1>
<h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor, reprehenderit veniam? Cupiditate possimus qui impedit aut dolorem laboriosam sed labore, quisquam, unde quam accusantium esse at perspiciatis rem hic. Cumque.</h2>
</section>
<script src="script.js"></script>
</body>
</html>

以及要应用的CSS隐藏样式：

#header .hide {
padding-top: -100px;
}

您编写了document.getElementById("header");，但没有具有id="header"属性的元素。我想你需要的是document.getElementById("site-header");

Javascript网站标题 - 隐藏向下滚动功能"Uncaught TypeError: header is null"错误

相关内容

最新更新

热门标签：