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