css/javascript - how to make centered image on landing page transition to Navbar logo on scrolling

Question

This is a simple navbar without javascript or custom CSS.

I would like to make a navbar brand as a logo image which would be at the center of the page when not scrolling down but when the user scrolls the logo image at the center transitions and reach to the left side and become a navbar brand.

I don't know how to animate and make this look seamless.

Here are images for reference: Image for Not Scrolled down and Scrolled down

UmairFarooq · Answer

1.Giving the navbar a second class of scroll & defining css for when it has Scroll Class.

2.Adding transition in the default CSS.

3.Adding Event Listener on the window gives us ScrollY every time we scroll.

4.Adding if(condition) to check the scrolly position. all I am saying is if the ScrollY is Less Then 20.then add the class otherwise remove.

let navBar = document.querySelector(".navbar");
window.addEventListener("scroll", (event) => {
  let scroll = this.scrollY;
  if (scroll < 20) {
    navBar.classList.add("scroll");
  } else {
    navBar.classList.remove("scroll");
  }
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: gainsboro;
  height: 200vh;
}

.navbar {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100vw;
  height: 60px;
  padding: 20px;
  background-color: white;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.397);
  transition: all 0.5s ease-in-out;
}

.logo {
  height: 60px;
  transition: all 0.25s ease-in-out;
}

.navbar.scroll .logo {
  height: 500px;
}

.navbar.scroll {
  height: 100vh;
  width: 100vw;
  justify-content: center;
  overflow: hidden;
}

.navbar.scroll .navbar-toggler {
  display: none;
}

BGP100 · Answer

To put a logo in the center of the page you could center it with this code, and for the topnav use the thing below the image tag:




  Home
  About
  Pages
  Contact

Or you could always use svg's that are inline elements and are easier to put inside of the topnav

css/javascript - how to make centered image on landing page transition to Navbar logo on scrolling

2 Answers