导航栏上的下拉菜单不适用于Safari，但适用于Chrome

Question

我的导航栏基本上可以在Chrome浏览器中正常运行，但是当切换到另一个浏览器（在本例中为Safari）时，它不起作用。仅在页面顶部时。向下滚动时，不会显示下拉选项。

最初，我有一个问题，就是下拉菜单在向下滚动（粘性导航栏）时无法正常工作，但此问题已在Chrome中得到修复。我知道这可能是缺少针对不同浏览器的“ -webkit-”或“ -moz-”之类的标签的问题，我不确定应该在哪里添加它们。

p {
  padding: 13px;
  text-align: justify;
}

.nav {
  position: fixed;
  width: 100%;
  top: 0;
}

.nav a {
  position: fixed;
  background-color: #333;
  z-index: 9999;
  overflow: show;
}

.nav a.home-btn {
  position: relative;
}

.nav a.logout-btn {
  position: relative;
}

#head1 {
  text-align: center;
  background-color: black;
  color: white;
  font-family: sans-serif;
  text-decoration: none;
  font-size: 30px;
  padding: 10px 14px;
}

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  list-style: none;
  text-decoration: none;
  z-index: 9999;
}

.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: sans-serif;
  z-index: 9999;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.profile-dropdown {
  float: left;
  overflow: hidden;
}

.profile-dropdown .profile-btn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.profile-content {
  display: none;
  position: fixed;
  background-color: #333;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.profile-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  position: relative;
}

.profile-content a:hover {
  background-color: gray;
}

.profile-dropdown:hover .profile-content {
  display: block;
}

.search-dropdown {
  float: left;
  overflow: hidden;
}

.search-dropdown .search-btn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.search-btn:hover,
.profile-btn:hover,
.home-btn:hover,
.logout-btn:hover {
  background-color: #2ecc71;
}

.navbar a.logout-btn {
  float: right;
}

.search-content {
  display: none;
  position: fixed;
  background-color: #333;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.search-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  position: relative;
}

.search-content a:hover {
  background-color: gray;
}

.search-dropdown:hover .search-content {
  display: block;
}

.listings-dropdown {
  float: left;
  overflow: hidden;
}

.listings-dropdown .listings-btn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.listings-content {
  display: none;
  position: fixed;
  background-color: #333;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.listings-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  position: relative;
}

.listings-content a:hover {
  background-color: gray;
}

.listings-dropdown:hover .listings-content {
  display: block;
}

.listings-btn:hover {
  background-color: #2ecc71;
}

.messages-dropdown {
  float: left;
  overflow: hidden;
}

.messages-dropdown .messages-btn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.messages-content {
  display: none;
  position: fixed;
  background-color: #333;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.messages-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  position: relative;
}

.messages-content a:hover {
  background-color: gray;
}

.messages-dropdown:hover .messages-content {
  display: block;
}

.messages-btn:hover {
  background-color: #2ecc71;
}

.settings-dropdown {
  float: left;
  overflow: hidden;
}

.settings-dropdown .settings-btn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.settings-content {
  display: none;
  position: fixed;
  background-color: #333;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.settings-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  position: relative;
}

.settings-content a:hover {
  background-color: gray;
}

.settings-dropdown:hover .settings-content {
  display: block;
}

.settings-btn:hover {
  background-color: #2ecc71;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

<html>
<link rel="stylesheet" href="../css/updateInfo.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<body>

  <div class="header">
    <h1 id="head1">Lost And Found</h1>
  </div>
  <div class="navbar">
    <a href="mainPage.html" class="home-btn">Home</a>

    <div class="profile-dropdown">
      <button class="profile-btn">Profile <i class="fa fa-caret-down"></i></button>
      <div class="profile-content">
        <a href="#">Your Listings</a>
        <a href="updateInfo.html">Update Info</a>
      </div>
    </div>

    <div class="search-dropdown">
      <button class="search-btn">Search <i class="fa fa-caret-down"></i></button>
      <div class="search-content">
        <a href="#">Search Lost</a>
        <a href="#">Search Found</a>
      </div>
    </div>

    <div class="listings-dropdown">
      <button class="listings-btn">Listings <i class="fa fa-caret-down"></i></button>
      <div class="listings-content">
        <a href="#">Report Lost</a>
        <a href="#">Report Found</a>
      </div>
    </div>

    <div class="messages-dropdown">
      <button class="messages-btn">Messages <i class="fa fa-caret-down"></i></button>
      <div class="messages-content">
        <a href="#">New</a>
        <a href="#">Sent</a>
        <a href="#">Deleted</a>
      </div>
    </div>

    <div class="settings-dropdown">
      <button class="settings-btn">Settings <i class="fa fa-caret-down"></i></button>
      <div class="settings-content">
        <a href="#">Change Password</a>
      </div>
    </div>
    <a href="index.html" class="logout-btn">Logout</a>
  </div>



  <script type="text/javascript">
    var nav = document.getElementsByClassName("navbar");

    window.onscroll = function sticky() {
      if (window.pageYOffset > nav[0].offsetTop) {
        nav[0].classList.add("nav");
      } else {
        nav[0].classList.remove("nav");
      }
    }
  </script>


  <p> mumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbombo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbombo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbombo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo
    jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbomumbo jumbo
  </p>


</body>

</html>

所以我想要的是让粘性导航栏下拉菜单项在所有浏览器中都可以像在Chrome中发生的一样工作。在页面顶部，我可以看到所有下拉选项，向下滚动页面时，也可以看到所有下拉选项。

Answer 1

当您在Safari中打开页面时，向下滚动时该导航栏是否固定在顶部？ 如果不是，请尝试在您将导航设置为bitmap.compress(Bitmap.CompressFormat.JPEG, 100, fos);

的位置添加in.read(msg_buff, 0, byte_size)