使用 JavaScript 获取窗口的顶部答案

【问题标题】：Get the top part of the Window using JavaScript使用 JavaScript 获取窗口的顶部
【发布时间】：2023-03-28 08:16:01
【问题描述】：

我正在制作导航栏。好吧，它工作正常（我向下滚动并且样式更改），但是当我滚动到顶部时，样式保持不变。当我滚动到顶部时，有没有办法改变样式？

这是 HTML

<div class="navbar">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <a href="#"><span>Visit San Francisco</span></a>
</div>

这是 JavaScript：

var body = document.querySelector("body");
var navbar = document.querySelector(".navbar");
var cover = document.querySelector(".cover");

function changeNavbarStyle() {
    navbar.classList.add("postConv");
}

function removeNavbarStyle() {
    navbar.classList.remove("postConv");
}

body.onscroll = changeNavbarStyle;

【问题讨论】：

标签： javascript html css navbar

【解决方案1】：

大多数现代浏览器，如“Firefox”、“Opera”、“Edge”……使用document.documentElement.scrollTop 来检测页面顶部的滚动位置。因此，也许如果您按如下方式更改脚本，它会起作用：

var body = document.querySelector("body");
var navbar = document.querySelector(".navbar");
var cover = document.querySelector(".cover");

function changeNavbarStyle() {
    navbar.classList.add("postConv");
    if(document.documentElement.scrollTop === 0) {
        removeNavbarStyle();
    }
}

function removeNavbarStyle() {
    navbar.classList.remove("postConv");
}

body.onscroll = changeNavbarStyle;

body {
    min-height: 850px;
}

.postConv {
    background-color: #c5bdd1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

<!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">
    <title>nav-style</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="navbar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <a href="#"><span>Visit San Francisco</span></a>
    </div>
      
    <script src="script.js"></script>
</body>
</html>

【讨论】：

谢谢！我对这个一无所知，所以； 1. 我解决了我的问题，并且， 2. 我学到了一些新东西。谢啦！ :D

【解决方案2】：

您可以使用 HTML DOM onScroll 事件。所以你的 HTML 代码看起来像：

<body id="body" onscroll="scroll()">
    <div class="navbar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <a href="#"><span>Visit San Francisco</span></a>
    </div>
</body>

在您的 JavaScript 代码中，您将定义您的 scroll() 方法，例如：

function scroll() {
    var elmnt = document.getElementById("body");
    var y = elmnt.scrollTop;
    if(y == 0) {
        navbar.classList.remove("postConv");
    } else {
        navbar.classList.add("postConv");
    }
}

【讨论】：

谢谢！我试了一下，效果很好。谢啦！ :D