top
/
top.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>顶部导航条</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

  <div class="navbar">
    <div class="navbar-left">
      <div class="left-top">
        <ul>
          <li><a href="">本科招生</a></li>
          <li></li>
          <li><a href="">到访农大</a></li>
          <li></li>
          <li><a href="">我要加盟</a></li>
          <li></li>
          <li><a href="">信息公开</a></li>
          <li></li>
          <li><a href="">旧版</a></li>
      </ul>
      </div>
    <div class="left-bottom">
      <ul>
        <li><a href="">学校概况</a></li>
        <li><a href="">机构设置</a></li>
        <li><a href="">教育教学</a></li>
        <li><a href="">师资队伍</a></li>
      </ul>
    </div>
  </div>
  <div class="navbar-center">
    <img src="images/222.jpg" alt="">
  </div>
  <div class="navbar-right">
    <div class="right-top">
      <ul>
        <li><a href="">无障碍</a></li>
        <li></li>
        <li><a href="">邮箱</a></li>
        <li></li>
        <li><a href="">快速通道</a></li>
        <li></li>
        <li><a href="">English</a></li>
        <li></li>
        <li><a href="">搜索</a></li>
      </ul>
    </div>
    <div class="right-bottom">
      <ul>
        <li><a href="">科学研究</a></li>
        <li><a href="">社会服务</a></li>
        <li><a href="">招生就业</a></li>
        <li><a href="">印象农大</a></li>
      </ul>
    </div>
  </div>
</div>


<script>
  window.addEventListener('scroll', function() {
    var navbarCenter = document.querySelector('.navbar-center');
    var navbarHeight = document.querySelector('.navbar').offsetHeight;
    var scrollHeight = window.pageYOffset;

    // 根据滚动高度动态修改图片大小
    if (scrollHeight > navbarHeight) {
      navbarCenter.style.transform = 'scale(0.7)';
    } else {
      navbarCenter.style.transform = 'scale(1)';
    }
  });
</script>

</body>
</html>