1

Without using jQuery (because I found a lot of answers for this question using it but I'm trying to not to since I'm still getting a grip with vanilla JS) I want to have my top arrow disappear when I'm at the top of the page and my bottom arrow disappear when I'm at the bottom of the page.

I feel like I could achieve this initially having the top arrow with visibility: hidden and then by creating a function that recognizes that the window is past a certain point and it would appear at that point (same thing to the bottom, I would assume) but I can't figure out how to translate that to 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);
}
3
  • Hey ItzaMi, I don't know, if you found a solution. If not, please check my updated answer.
    – Olafant
    Commented Feb 26, 2019 at 12:32
  • @Olafant thanks for the update. I ended up using just scrollBy with fixed values (0, 1000) and (0, -1000) since I was just trying with the events without having in consideration any other type of screen. The end result was this: github.com/ItzaMi/Static It looks incredibly bad and I'll do the project once again while using your solution as a baseline! I also figured that it would be smart to define the entire section as the element to which I want to scroll to and that would allow me to not have to define any amount of pixels
    – ItzaMi
    Commented Feb 27, 2019 at 13:16
  • Sounds good. Sometimes it's just better to start from scratch when all pieces of the puzzle are clear. I think, scrolling sectionwise is the right approach. If my answer is helpful, please consider upoting/accepting it.
    – Olafant
    Commented Mar 3, 2019 at 5:42

1 Answer 1

1

You can listen to the scroll event. The scoll distance can be read with

window.scrollY

or

pageYOffset

and then just set the visibility of your arrows like you already considered.

In the expample I did it with the display property.

For you to do: Check, if window.scrollY and pageYOffset cover support for all browsers. And then adapt it to your code and refine the point for hiding the bottom arrow.

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.