css/javascript - 如何在滚动时使登录页面上的居中图像过渡到导航栏徽标

Question

这是一个没有 javascript 或自定义 CSS 的简单导航栏。

<nav class="navbar navbar-expand-md navbar-light bg-faded">
  <a class="navbar-brand" href="#">
    <img src="logo.jpg" alt="LOGO">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
  </div>
</nav>

我想将导航栏品牌制作为徽标图像，当不向下滚动但用户滚动中心过渡处的徽标图像并到达左侧并成为导航栏品牌时，它将位于页面中心。

我不知道如何制作动画并使这看起来无缝。

以下是供参考的图像：未向下滚动和向下滚动的图像

Answer 1

要将徽标放在页面中心，您可以使用此代码将其居中，对于 topnav，请使用图像标签下方的内容：

<img src="example.jpg" alt="image" class="center">

<div class="topnav">
  <a class="active" href="/">Home</a>
  <a href="/about">About</a>
  <a href="/pages">Pages</a>
  <a href="/contact">Contact</a>
</div>

<style>
html, body {
  width: 100%;
  height: 100%;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 20%;
}
.topnav {
  position: fixed;
  bottom: 0;
  width: 100%;
}
.active {
  background-color: #04AA6D;
  color: white;
}
</style>

或者你总是可以使用 svg 的内联元素，并且更容易放在 topnav 中

Answer 2

1.给导航栏第二个 class scroll & 定义 css ，当它有Scroll Class时。

2.在默认的CSS中添加过渡。

3.在 window 上添加事件监听器，每次滚动时都会给我们ScrollY 。

4.添加if(condition)来检查滚动的position。 我要说的是如果 ScrollY 小于 20。然后添加 class 否则删除..

 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; }

 <body> <nav class="navbar scroll navbar-expand-md navbar-light bg-faded"> <a class="navbar-brand" href="#"> <img class="logo" src="https://d1csarkz8obe9u.cloudfront.net/posterpreviews/coffee-logo-design-template-938fdd0de81fdd844a5154e66b42a914_screen.jpg?ts=1625004947" alt="LOGO" /> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu-2" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <line x1="4" y1="6" x2="20" y2="6" /> <line x1="4" y1="12" x2="20" y2="12" /> <line x1="4" y1="18" x2="20" y2="18" /> </svg> </button> <.-- <div class="collapse navbar-collapse" id="navbarNav"></div> --> </nav> <script src="src/index.js"></script> </body>

css/javascript - 如何在滚动时使登录页面上的居中图像过渡到导航栏徽标

问题描述

2 个解决方案

解决方案1
0 2022-09-21 18:23:53

解决方案2
0 2022-09-21 18:37:01

css/javascript - 如何在滚动时使登录页面上的居中图像过渡到导航栏徽标

问题描述

2 个解决方案

解决方案1 0 2022-09-21 18:23:53

解决方案2 0 2022-09-21 18:37:01

解决方案1
0 2022-09-21 18:23:53

解决方案2
0 2022-09-21 18:37:01