如何设置滚动隐藏导航栏的Logo尺寸及调整导航链接位置

前置代码修正 #

现有代码存在几处语法问题，先修复避免影响功能：

• HTML中Logo对应的<a>标签未闭合
• font-awesome的样式引用放在了navbar容器内，需要移到页面<head>节点中
• 存在多余的</nav>闭合标签，外层容器是div没有对应的nav起始标签，直接删除即可

修正后的完整HTML代码如下：

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <div id="navbar">
    <a class="navbar-brand" href="images/Besosnbuds.jpg">
      <div class="logo-image">
        <img src="images/Besosnbuds.jpg" class="img-fluid" alt="网站logo">
      </div>
    </a>
    <a href="index.html">Home </a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
    <a class="social_media" href="https://www.facebook.com/natalie.april.73"><i class="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></a>
  </div>
</body>

需求1：Logo与导航栏尺寸适配、滚动同步隐藏 #

现有JS逻辑是控制整个navbar容器的显示隐藏，Logo本身在navbar内部，只要调整导航栏和Logo的尺寸匹配即可实现需求，修改CSS代码如下：

#navbar {
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  transition: top 0.3s;
  height: 50px; /* 固定导航栏高度，和JS隐藏位移-50px对应 */
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
}

#navbar a {
  display: block;
  color: white;
  text-align: center;
  padding: 0 15px;
  line-height: 50px;
  text-decoration: none;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

.logo-image img{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: block;
}

原有JS逻辑无需修改，滚动时整个导航栏上移隐藏，Logo会同步隐藏。

需求2：导航链接与Logo拉开间距 #

可以通过给首个非Logo的导航链接添加左侧外边距实现，按需调整数值即可控制间距大小：

/* 首个a标签为Logo，第二个对应Home链接 */
#navbar a:nth-of-type(2) {
  margin-left: 30px;
}

如果需要把社交图标固定到导航栏最右侧，可额外添加以下样式：

#navbar a.social_media:first-of-type {
  margin-left: auto;
}

内容的提问来源于stack exchange，提问作者WinnyDaBish