Question

在不使用jQuery的情况下（因为我找到了很多使用它的问题的答案，但由于我仍然对香草JS有所了解，所以我尝试不这样做），我想让我的上箭头消失位于页面顶部的m处，而当我位于页面底部时，我的底部箭头消失。

我觉得我可以首先实现具有可见性的顶部箭头：隐藏，然后通过创建一个识别窗口已超过特定点并会出现在该点的函数来实现这一点（与底部相同，会假设），但我不知道如何将其转换为JavaScript。

CodePen：https://codepen.io/ItzaMi/pen/wRyxxO

<body>
<nav>
    <div id="nav-square">
        <h1>STATIC</h1>
        <ul>
            <li class="nav-list"><a href=#home>Home</a></li>
            <li class="nav-list"><a href=#contacts>Contacts</a></li>
            <li class="nav-list"><a href=#aboutus>About Us</a></li>
            <li class="nav-list"><a href=#moreaboutus>More About Us</a></li>
        </ul>    
    </div>
</nav>
<div id="info">
    <div id="main-content">
        <div id="home" class="section">
            <img src="img/arrow_reverse.png" class="arrow_top" onclick="scrollingtop()">
            <h1>Home</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, perferendis illum modi necessitatibus laborum distinctio dolorem quia inventore ullam omnis ex possimus, soluta repellendus! Iure voluptas laboriosam exercitationem beatae reprehenderit quaerat ex debitis quas autem doloremque, ea eligendi modi maxime magni dicta voluptatem rem eius tempora deleniti distinctio! Suscipit dignissimos voluptates temporibus eum adipisci recusandae ad tempora sint sequi quidem iste vel ipsam aperiam eligendi iusto assumenda reprehenderit distinctio quis, tempore accusantium possimus minima impedit. Odit consequuntur dolorum sit iure, assumenda atque ratione ipsam officiis quae consectetur eos fuga omnis molestiae! Fuga dolorem laboriosam nostrum dicta facere ullam aspernatur, atque, maiores eius hic labore asperiores molestiae? Eum illum iure quibusdam, non perspiciatis fuga tempora quis culpa provident consectetur odit ut ab, voluptatum, aliquam magnam! Corporis, deserunt molestias hic eligendi amet eos omnis asperiores facilis accusantium blanditiis minima magnam cupiditate pariatur? Cum recusandae nisi modi dolorem deleniti ab labore reprehenderit perspiciatis tenetur. Facilis nihil enim qui reiciendis alias soluta ratione repellendus possimus quaerat magni, omnis aperiam aliquam eum asperiores deserunt fugiat sunt, eius itaque dolores ad, modi repudiandae! Eum, modi facere animi similique fuga omnis. Illo architecto optio fuga repellendus doloremque eos, commodi soluta reiciendis accusantium unde, esse nemo voluptates veritatis?</p>
            <img src="img/circle-arrow-icon.png" class="arrow_bottom" onclick="scrollingbottom()">
        </div>
        <div id="contacts" class="section">
            <!-- <img src="img/arrow_reverse.png" class="arrow" onclick="scrollingtop()"> -->
            <h1>Contacts</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, perferendis illum modi necessitatibus laborum distinctio dolorem quia inventore ullam omnis ex possimus, soluta repellendus! Iure voluptas laboriosam exercitationem beatae reprehenderit quaerat ex debitis quas autem doloremque, ea eligendi modi maxime magni dicta voluptatem rem eius tempora deleniti distinctio! Suscipit dignissimos voluptates temporibus eum adipisci recusandae ad tempora sint sequi quidem iste vel ipsam aperiam eligendi iusto assumenda reprehenderit distinctio quis, tempore accusantium possimus minima impedit. Odit consequuntur dolorum sit iure, assumenda atque ratione ipsam officiis quae consectetur eos fuga omnis molestiae! Fuga dolorem laboriosam nostrum dicta facere ullam aspernatur, atque, maiores eius hic labore asperiores molestiae? Eum illum iure quibusdam, non perspiciatis fuga tempora quis culpa provident consectetur odit ut ab, voluptatum, aliquam magnam! Corporis, deserunt molestias hic eligendi amet eos omnis asperiores facilis accusantium blanditiis minima magnam cupiditate pariatur? Cum recusandae nisi modi dolorem deleniti ab labore reprehenderit perspiciatis tenetur. Facilis nihil enim qui reiciendis alias soluta ratione repellendus possimus quaerat magni, omnis aperiam aliquam eum asperiores deserunt fugiat sunt, eius itaque dolores ad, modi repudiandae! Eum, modi facere animi similique fuga omnis. Illo architecto optio fuga repellendus doloremque eos, commodi soluta reiciendis accusantium unde, esse nemo voluptates veritatis?</p>
            <!-- <img src="img/circle-arrow-icon.png" class="arrow" onclick="scrollingbottom()"> -->
        </div>
        <div id="aboutus" class="section">
            <!-- <img src="img/arrow_reverse.png" class="arrow" onclick="scrollingtop()"> -->
            <h1 >About Us</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, perferendis illum modi necessitatibus laborum distinctio dolorem quia inventore ullam omnis ex possimus, soluta repellendus! Iure voluptas laboriosam exercitationem beatae reprehenderit quaerat ex debitis quas autem doloremque, ea eligendi modi maxime magni dicta voluptatem rem eius tempora deleniti distinctio! Suscipit dignissimos voluptates temporibus eum adipisci recusandae ad tempora sint sequi quidem iste vel ipsam aperiam eligendi iusto assumenda reprehenderit distinctio quis, tempore accusantium possimus minima impedit. Odit consequuntur dolorum sit iure, assumenda atque ratione ipsam officiis quae consectetur eos fuga omnis molestiae! Fuga dolorem laboriosam nostrum dicta facere ullam aspernatur, atque, maiores eius hic labore asperiores molestiae? Eum illum iure quibusdam, non perspiciatis fuga tempora quis culpa provident consectetur odit ut ab, voluptatum, aliquam magnam! Corporis, deserunt molestias hic eligendi amet eos omnis asperiores facilis accusantium blanditiis minima magnam cupiditate pariatur? Cum recusandae nisi modi dolorem deleniti ab labore reprehenderit perspiciatis tenetur. Facilis nihil enim qui reiciendis alias soluta ratione repellendus possimus quaerat magni, omnis aperiam aliquam eum asperiores deserunt fugiat sunt, eius itaque dolores ad, modi repudiandae! Eum, modi facere animi similique fuga omnis. Illo architecto optio fuga repellendus doloremque eos, commodi soluta reiciendis accusantium unde, esse nemo voluptates veritatis?</p>
            <!-- <img src="img/circle-arrow-icon.png" class="arrow" onclick="scrollingbottom()"> -->
        </div>
        <div id="moreaboutus" class="section">
            <!-- <img src="img/arrow_reverse.png" class="arrow" onclick="scrollingtop()"> -->
            <h1>More About Us</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, perferendis illum modi necessitatibus laborum distinctio dolorem quia inventore ullam omnis ex possimus, soluta repellendus! Iure voluptas laboriosam exercitationem beatae reprehenderit quaerat ex debitis quas autem doloremque, ea eligendi modi maxime magni dicta voluptatem rem eius tempora deleniti distinctio! Suscipit dignissimos voluptates temporibus eum adipisci recusandae ad tempora sint sequi quidem iste vel ipsam aperiam eligendi iusto assumenda reprehenderit distinctio quis, tempore accusantium possimus minima impedit. Odit consequuntur dolorum sit iure, assumenda atque ratione ipsam officiis quae consectetur eos fuga omnis molestiae! Fuga dolorem laboriosam nostrum dicta facere ullam aspernatur, atque, maiores eius hic labore asperiores molestiae? Eum illum iure quibusdam, non perspiciatis fuga tempora quis culpa provident consectetur odit ut ab, voluptatum, aliquam magnam! Corporis, deserunt molestias hic eligendi amet eos omnis asperiores facilis accusantium blanditiis minima magnam cupiditate pariatur? Cum recusandae nisi modi dolorem deleniti ab labore reprehenderit perspiciatis tenetur. Facilis nihil enim qui reiciendis alias soluta ratione repellendus possimus quaerat magni, omnis aperiam aliquam eum asperiores deserunt fugiat sunt, eius itaque dolores ad, modi repudiandae! Eum, modi facere animi similique fuga omnis. Illo architecto optio fuga repellendus doloremque eos, commodi soluta reiciendis accusantium unde, esse nemo voluptates veritatis?</p>
        </div>
    </div>
</div>

CSS：

html {
scroll-behavior: smooth;
}

body {
height: 100vh;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}

/* Nav Bar */

nav {
grid-column: 1;
background-color: #ffffff;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 3fr 1fr;
position: fixed;
width: 50vw;
}

#nav-square {
grid-column: 2;
grid-row: 2;
background-color: #c9c9c9;
padding: 0 50px 0 50px;
margin: 0;
}

#nav-square h1 {
margin: 0;
padding: 0;
text-align: center;
font-size: 100px;
color: #17526d;
 }

#nav-square ul {
list-style-type: none;
margin: 0;
vertical-align: middle;
line-height: 50px;
padding: 20px 0 50px 0;
}

.nav-list {
font-size: 2em;
padding: 1em;
text-align: center;
}

.nav-list a {
display: block;
text-decoration: none;
color: black;
}

/* Content */

#info {
background-color: #ffffff;
display: flex;
margin: auto;
width: 45vw;
height: 100vh;
float: right;
margin-right: 5%;
position: relative;
}

#main-content {
align-items: center;
text-align: center;
line-height: 40px;
height: 100vh;
}

#main-content p {
font-size: 20px;
}

.section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}

.arrow_top {
width: 5%;
position: fixed;
top: 0;
/* visibility: hidden; */
}

.arrow_bottom {
width: 5%;
position: fixed;
bottom: 0;
}

JavaScript：

function scrollingbottom() {
window.scrollBy(0, 1000);
}

function scrollingtop() {
window.scrollBy(0, -1000);
}

Answer 1

您可以收听滚动事件。 scoll距离可以通过

读取

window.scrollY

或

pageYOffset

，然后像您已经考虑过的那样设置箭头的可见性。

在示例中，我是使用display属性完成的。

您可以执行的操作：检查window.scrollY和pageYOffset是否支持所有浏览器。然后将其调整为适合您的代码的位置，并完善隐藏隐藏底部箭头的点。

document.addEventListener('scroll', () => {

  const fromTop = window.scrollY || pageYOffset;
  const fromBottom = document.getElementById('main').getBoundingClientRect().height-fromTop;
  const upArrow = document.getElementById('upArrow');
  const downArrow = document.getElementById('downArrow');

  if (fromTop > 10) {
    upArrow.style.display = 'block';
  } else {
    upArrow.style.display = 'none';
  }

  if (fromBottom > fromTop) {
    downArrow.style.display = 'block';
  } else {
    downArrow.style.display = 'none';
  }

});

#main {
  margin: 20px auto 20px auto;
}
#upArrow {
  position: fixed;
  top: 2px;
  margin-left: 48%;
  display: none;
}
#downArrow {
  position: fixed;
  bottom: 2px;
  margin-left:48%;
}

<div id="main">
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
<div id="endOfPage"></div>
</div>
<div id="upArrow"><a href="#top">&uArr;</a></div>
<div id="downArrow"><a href="#endOfPage">&dArr;</a></div>

如何使滚动箭头在顶部和底部消失？的JavaScript

1 个答案: