javascript - 固定的 css 导航栏在折叠 View 中切换时消失

Question

我有一个 css 菜单，它固定在滚动页面的顶部。它工作正常，直到菜单折叠并且我尝试在从页面顶部滚动离开时打开菜单。当我在滚动时切换折叠时，菜单消失并出现错误。

我该如何使用纯 css/javascript 解决这个问题。

window.onscroll = function() {
  stickyFunction()
};

var navbar = document.getElementById("topNavBar");
var sticky = navbar.offsetTop;

function stickyFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

function menuExpand() {
  var x = document.getElementById("topNavBar");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

.topNavInput {
  float: left;
  padding-top: 20px;
  width: 55%;
  padding-left: 15px;
}

.topnav #navLogo a:hover {
  background-color: #333;
}

.topnav #navLogo a {
  float: left;
  padding: 5px;
}

.topnav a span {
  border: 1px solid;
  padding: 10px;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav .bars {
  width: 28px;
  height: 4px;
  background-color: white;
  margin: 3px 4px;
}

.topnav a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 26px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #d00b1b;
}

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

.topnav .collapseIcon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a span {
    border: none;
    padding: 0px !important;
  }
  .topNavInput {
    display: none;
  }
  .topnav a.collapseIcon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  .menuItem {
    width: 100%;
  }
  .topnav.responsive #navLogo a {
    float: none;
  }
  .topnav #navLogo a {
    float: left;
    margin-top: 10px;
    margin-left: 14px;
  }
  .topnav.responsive .collapseIcon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

.fakeContent {
  height: 1000px;
}

<div class="topnav" id="topNavBar">
  <div id="navLogo">
    <a class="logo" href="/Home/index"> </a>
  </div>
  <div class="input-holder topNavInput">
    <input id="oldSearchBar" name="q" class="form-control" type="search" placeholder="Try search for things'" autocomplete="off">
  </div>
  <a class="menuItem" data-toggle="modal" data-target="#Login" href="#"><span>SIGN IN</span></a>
  <a href="/Home/ContactUs">Support</a>
  <a href="/AboutUs/Index">About Us</a>
  <a href="/Events/EventsAll">Browse Events</a>
  <a href="javascript:void(0);" class="collapseIcon" onclick="menuExpand()">
    <div class="bars"></div>
    <div class="bars"></div>
    <div class="bars"></div>
  </a>
</div>
<div class="fakeContent"></div>

感谢@elveti 的解决方案

将菜单扩展功能更改为

  function menuExpand() {
    var x = document.getElementById("topNavBar");
    if (!x.classList.contains("responsive")) {
        x.classList.add("responsive");
    } else {
        x.classList.remove("responsive");
    }
}

并从响应类中删除了 'position:relative' css 属性。

Answer 1

window.onscroll = function () { stickyFunction() };

var navbar = document.getElementById("topNavBar");
var sticky = navbar.offsetTop;

function stickyFunction() {
    if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
    } else {
        navbar.classList.remove("sticky");
    }
}
function menuExpand() {
    var x = document.getElementById("topNavBar");
    if (!x.classList.contains("responsive")) {
       x.classList.add("responsive");
    } else {
      x.classList.remove("responsive");
    }
}

.topNavInput {
  float: left;
  padding-top: 20px;
  width: 55%;
  padding-left: 15px;
}

.topnav #navLogo a:hover {
  background-color: #333;
}

.topnav #navLogo a {
  float: left;
  padding: 5px;
}

.topnav a span {
  border: 1px solid;
  padding: 10px;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav .bars {
  width: 28px;
  height: 4px;
  background-color: white;
  margin: 3px 4px;
}

.topnav a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 26px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #d00b1b;
}

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

.topnav .collapseIcon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav{
    padding:20px 0px
  }
  .topnav .collapseIcon{
display:block;
  margin-left:auto;
    margin-right:20px;
  width:28px}
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a span {
    border: none;
    padding: 0px !important;
  }
  .topNavInput {
    display: none;
  }

@media screen and (max-width: 600px) {
  .menuItem {
    width: 100%;
  }
  .topnav.responsive #navLogo a {
    float: none;
  }
  .topnav #navLogo a {
    float: left;
    display:none;
    margin-top: 10px;
    margin-left: 14px;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

 <div class="topnav" id="topNavBar">
       <div class="collapseIcon" onclick="menuExpand()">
        <div class="bars"></div>
        <div class="bars"></div>
        <div class="bars"></div>
    </div>
    <div id="navLogo">
        <a class="logo" href="/Home/index"> </a>
    </div>
    <div class="input-holder topNavInput">
        <input id="oldSearchBar" name="q" class="form-control" type="search" placeholder="Try search for things'" autocomplete="off">
    </div>

    <a class="menuItem" data-toggle="modal" data-target="#Login" href="#"><span>SIGN IN</span></a>
    <a href="/Home/ContactUs">Support</a>
    <a href="/AboutUs/Index">About Us</a>
    <a href="/Events/EventsAll">Browse Events</a>
      
</div>

<div style="height:2000px"></div>

很好地更改了一些 html，主要问题是响应类试图为您的固定顶部导航应用相对位置! 希望对您有所帮助!