Home > other >  How to hide the navbar on scroll on a horizontal scrolling website?
How to hide the navbar on scroll on a horizontal scrolling website?

Time：05-26

I'm coding this website and I can not find the solution. It is so frustrating having a user scrolling through the website with the navbar following them. Yet, I can not find the solution to the problem.

I've managed to apply the solution to a vertical scrolling website, however on the horizontal scrolling one, it does not work.

The idea is that the navbar hides / shows up on scroll left / right.

So, here's the HTML:

    <header id="navbar">
        <ul >
          <li><a href="#" target="_blank">Home</a></li>
          <li><a href="#" target="_blank">About</a></li>
          <li><a href="#" target="_blank">Careers</a></li>
          <li><a href="#" target="_blank">Order Now</a></li>
        </ul>
      </header>
      
      <section >
        <div >
          <div >
            <video muted loop autoplay>
              <source src="videos/2.mp4" />
            </video>
            <div >
              <h3>
                <span id="art">art</span>
                <span id="is">is</span>
                <span id="where">where</span>
                <span id="the">the</span>
                <span id="work">work</span>
                <span id="meets">meets</span>
                <span id="love">love.</span>
              </h3>
              <img src="images/hands.png" id="hands" />
            </div>
          </div>
        </div>
      </section>

    <script src="js/app.js"text/javascript"></script>

There are no errors in the HTML code.

Here's the CSS code:

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
}
body {
    background-color: var(--clr-black);
    color: var(--clr-white);
    font-family: var(--ff-main);
    font-size: 1.1rem;
}
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    transition: 0.6s;
    padding: 22px 100px;
    z-index: 100000;
    /* border-bottom: 1px solid var(--clr-orange); */
}
.nav-links {
    position: absolute;
    top: 0;
    left: 0;
    border-right: 1px solid var(--clr-green);
    border-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    height: 100vh;
    max-width: 3%;
    text-align: center;
}
.nav-links li {
    transform: rotate(-90deg);
    margin-bottom: 3rem;
}
.nav-links a{
    font-family: var(--ff-main);
    text-transform: uppercase;
    font-weight: 400 !important; 
    letter-spacing: 0.243rem;
    font-size: 12px;
    text-decoration: none;
    color: inherit;
}
.slide {
    width: 100vw;
    height: 100vh;
}
.wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 400vw;
    transform: rotate(90deg) translateY(-100vh);
    transform-origin: top left;
    z-index: 0;

}
.one {
    position: relative;
    background: var(--clr-black);
    z-index: 2;
}
.one video {
    position: absolute;
    z-index: 0;
    opacity: 0.8;
    width: 100vw;
    object-fit: cover;
    filter: contrast(100%) saturate(100%) hue-rotate(111deg);
}
.one-content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    margin-left: 11rem;
}
.one-content #art {
    position: absolute;
    top: 6rem;
    left: 3rem;
    font-size: 11rem;
    font-weight: 900;
    text-transform: uppercase;
}
.one-content #is {
    position: absolute;
    top: 15rem;
    left: 33rem;
    font-size: 6rem;
    font-weight: 100;
    text-transform: uppercase;
}
.one-content #where {
    position: absolute;
    top: 22rem;
    left: 43rem;
    font-size: 6rem;
    font-weight: 600;
    text-transform: uppercase;
}
.one-content #the {
    position: absolute;
    top: 33rem;
    left: 11rem;
    font-size: 3rem;
    font-weight: 300;
    text-transform: uppercase;
}
.one-content #work {
    position: absolute;
    top: 33rem;
    left: 22rem;
    font-size: 9rem;
    font-weight: 700;
    text-transform: uppercase;
}
.one-content #meets {
    position: absolute;
    top: 40rem;
    left: 56rem;
    font-size: 2rem;
    font-weight: 200;
    text-transform: uppercase;
}
.one-content #love {
    position: absolute;
    top: 47rem;
    left: 50rem;
    font-size: 11rem;
    font-weight: 900;
    text-transform: uppercase;
}
.one-content #hands {
    opacity: 1;
    position: absolute;
    top: 0rem;
    right: -25rem;
    width: 50rem;
}
.wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 400vw;
    transform: rotate(90deg) translateY(-100vh);
    transform-origin: top left;
    z-index: 0;

}
.outer-wrapper {
    width: 100vh;
    height: 100vw;
    transform: rotate(-90deg) translateX(-100vh);
    transform-origin: top left;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
    scrollbar-width: none;
}

I believe there may be some incorrect styling in the CSS code. However,

Here's the JavaScript code:

var prevScPos = window.pageXOffset;
window.addEventListener('scroll', function() {
  var curScPos = window.pageXOffset;
  if (prevScPos > curScPos) {
    document.getElementById("navbar").style.left = "0";
  } else {
    document.getElementById("navbar").style.left = "-60px";
  }
  prevScPos = curScPos;
})

Any help is appreciated.

Thanks in advance.

CodePudding user response：

You need to change the scroll event to wheel..

window.addEventListener('wheel', function() { ...


var prevScPos = window.pageXOffset;
window.addEventListener('wheel', function() {
  var curScPos = window.pageXOffset;
  if (prevScPos > curScPos) {
    document.getElementById("navbar").style.left = "0";
  } else {
    document.getElementById("navbar").style.left = "-60px";
  }
  prevScPos = curScPos;
})  
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
}
body {
    background-color: var(--clr-black);
    color: var(--clr-white);
    font-family: var(--ff-main);
    font-size: 1.1rem;
}
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    transition: 0.6s;
    padding: 22px 100px;
    z-index: 100000;
    /* border-bottom: 1px solid var(--clr-orange); */
}
.nav-links {
    position: absolute;
    top: 0;
    left: 0;
    border-right: 1px solid var(--clr-green);
    border-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    height: 100vh;
    max-width: 3%;
    text-align: center;
}
.nav-links li {
    transform: rotate(-90deg);
    margin-bottom: 3rem;
}
.nav-links a{
    font-family: var(--ff-main);
    text-transform: uppercase;
    font-weight: 400 !important; 
    letter-spacing: 0.243rem;
    font-size: 12px;
    text-decoration: none;
    color: inherit;
}
.slide {
    width: 100vw;
    height: 100vh;
}
.wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 400vw;
    transform: rotate(90deg) translateY(-100vh);
    transform-origin: top left;
    z-index: 0;

}
.one {
    position: relative;
    background: var(--clr-black);
    z-index: 2;
}
.one video {
    position: absolute;
    z-index: 0;
    opacity: 0.8;
    width: 100vw;
    object-fit: cover;
    filter: contrast(100%) saturate(100%) hue-rotate(111deg);
}
.one-content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    margin-left: 11rem;
}
.one-content #art {
    position: absolute;
    top: 6rem;
    left: 3rem;
    font-size: 11rem;
    font-weight: 900;
    text-transform: uppercase;
}
.one-content #is {
    position: absolute;
    top: 15rem;
    left: 33rem;
    font-size: 6rem;
    font-weight: 100;
    text-transform: uppercase;
}
.one-content #where {
    position: absolute;
    top: 22rem;
    left: 43rem;
    font-size: 6rem;
    font-weight: 600;
    text-transform: uppercase;
}
.one-content #the {
    position: absolute;
    top: 33rem;
    left: 11rem;
    font-size: 3rem;
    font-weight: 300;
    text-transform: uppercase;
}
.one-content #work {
    position: absolute;
    top: 33rem;
    left: 22rem;
    font-size: 9rem;
    font-weight: 700;
    text-transform: uppercase;
}
.one-content #meets {
    position: absolute;
    top: 40rem;
    left: 56rem;
    font-size: 2rem;
    font-weight: 200;
    text-transform: uppercase;
}
.one-content #love {
    position: absolute;
    top: 47rem;
    left: 50rem;
    font-size: 11rem;
    font-weight: 900;
    text-transform: uppercase;
}
.one-content #hands {
    opacity: 1;
    position: absolute;
    top: 0rem;
    right: -25rem;
    width: 50rem;
}
.wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 400vw;
    transform: rotate(90deg) translateY(-100vh);
    transform-origin: top left;
    z-index: 0;

}
.outer-wrapper {
    width: 100vh;
    height: 100vw;
    transform: rotate(-90deg) translateX(-100vh);
    transform-origin: top left;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
    scrollbar-width: none;
}
#navbar { position:absolute;}
    <header id="navbar">
        <ul >
          <li><a href="#" target="_blank">Home</a></li>
          <li><a href="#" target="_blank">About</a></li>
          <li><a href="#" target="_blank">Careers</a></li>
          <li><a href="#" target="_blank">Order Now</a></li>
        </ul>
      </header>
      
      <section >
        <div >
          <div >
            <video muted loop autoplay>
              <source src="videos/2.mp4" />
            </video>
            <div >
              <h3>
                <span id="art">art</span>
                <span id="is">is</span>
                <span id="where">where</span>
                <span id="the">the</span>
                <span id="work">work</span>
                <span id="meets">meets</span>
                <span id="love">love.</span>
              </h3>
              <img src="images/hands.png" id="hands" />
            </div>
          </div>
        </div>
      </section>

CodePudding user response：

Add the following CSS to the element.

.outer-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
scrollbar-width: none;
}

.outer-wrapper::-webkit-scrollbar{
 display: none;
}

For SCSS,

 .outer-wrapper {
width: 100vh;
height: 100vw;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
scrollbar-width: none;

  &:-webkit-scrollbar {
    display: none;
  }

}

Page link：https//www.codepudding.com/other/420001.html

Prev:Background image css not scaling down properly
Next:Nested Links & Buttons In A Card With Link NextJs
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding