如何在滾動導航欄上消失時調整徽標圖像的大小

Question

我沒有使用 bootstrap，因為我無法將它發送到 function。

我使用了 HTML、CSS 和 Javascript。我想讓徽標圖像與導航欄大小相同，並在滾動時消失。 此外，如果有人對如何將主頁/聯系人/等向右移動遠離徽標圖像提出建議，那就太好了。

這是代碼：

 /* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */ var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById("navbar").style.top = "0"; } else { document.getElementById("navbar").style.top = "-50px"; } prevScrollpos = currentScrollPos; }

 #navbar { background-color: #333; /* Black background color */ position: fixed; /* Make it stick/fixed */ top: 0; /* Stay on top */ width: 100%; /* Full width */ transition: top 0.3s; /* Transition effect when sliding down (and up) */ } /* Style the navbar links */ #navbar a { float: left; display: block; color: white; text-align: center; padding: 15px; text-decoration: none; } #navbar a:hover { background-color: #ddd; color: black; }.logo-image img{ width: 46px; height: 46px; border-radius: 50%; overflow: hidden; margin-top: -6px; }

 <div id="navbar"> <a class="navbar-brand" href="images/Besosnbuds.jpg"> <div class="logo-image"> <img src="images/Besosnbuds.jpg" class="img-fluid"> </div> <a href="index.html">Home </a> <a href="about.html">About</a> <a href="contact.html">Contact</a> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <a class="social_media" href="https://www.facebook.com/natalie.april.73"><i class="fa fa- fa-facebook-square" aria-hidden="true"></i></a> <a class="social_media" href="https://www.instagram.com/besosnbuds/"><i class="fa fa-instagram" aria-hidden="true"></i> </nav> </div>

Answer 1

要將 Home、Contact 和 About 從徽標圖像向右移動，您應該將 Home、Contact 和 About 錨標記包裹在 a 中，與徽標相同。 然后將這兩個 div 包裝在包含<div class='container'>中。 目標容器並添加

.container {
  display:flex;
  justify-content:space-between;
  align-content: space-between;
  width: 100%;
}

這應該將徽標推到最左邊，將其他所有內容推到右邊。

至於讓徽標在滾動時消失，請嘗試添加

document.getElementById("logo-image").style.opacity = "0";

或者

document.getElementById("logo-image").style.display = "none";

在 else 語句中。