响应式和粘性顶部菜单冲突-解网

问：

我陷入了“粘性”和“响应式”顶部菜单的冲突。当它没有滚动并且我单击 BARS 按钮打开菜单（处于响应状态）时，它工作正常。如果我向下滚动并且菜单是“粘性”，它会丢失它“position：fixed”并全部显示在顶部（返回 position：relative）。

这是我的 codepen ： codepen 用于顶部导航脚本冲突

// Function that expand the top menu when collapsed (responsive)

function opennav() {
var x = document.getElementById("myTopnav");

if (x.className === "topnav")
   {x.className += " responsive";}
else
   {x.className = "topnav";}}

// This is the function that stick the menu when scrolling

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

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

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

body { margin: 0; font-family: Arial, Helvetica, sans-serif;}

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

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

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

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

/* Responsive CSS for the top navigation menu */

@media screen and (max-width: 600px) {

  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* Sticky CLASS that will be added when scrolling */

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

.sticky + .content {
  padding-top: 60px;
}

<body>
   <div class="topnav" id="myTopnav">
      <a href="#home" class="active">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
      <a href="javascript:void(0);" class="icon" onclick="opennav()">
         <i class="fa fa-bars"></i>
      </a>
   </div>

   <div style="padding-left:16px">
      <!-- Put large text in this <p> to scroll -->
      <p>LOREM IPSUM</p>
   </div>
</body>

javascript css 菜单响应式粘性

糟糕的回答，我的朋友，问题不在于我们要离开哪个时代或有什么选择，而是关于剧本冲突！那是 W3school 代码，我只是一个初学者，我刚刚交叉了他们的两个不同的代码，一个用于粘性，第二个用于响应，所以我遇到了这个问题，并且浮点并没有像你提到的那样太过时，只是 flexbox 要好得多，但有些人仍然可以找到足够的浮点数，而且;回答那些在问答论坛中要求学习一些东西的人去 youtube 上学习是不聪明的!!!

0赞 Stalkium 12/14/2020

我知道它呈现得不好，但它是我认为它用于教育目的W3SCHOOLS，你可能会注意到我真的是 CSS 和网页设计的初学者，我是 RAD Studio （Delphi）下桌面和移动应用程序的分析师程序员我的问题是我从来没有转向网页设计，直到让我们说， 1 或 2 个月前，无论如何对不起，我将尝试重新编辑它并评论问题所在的部分

0赞 Stalkium 12/14/2020

代码编辑，我已经尽力了，仍然使用 Float，我必须从它们开始移动到 flexbox

0赞 Bulent 12/15/2020

W3SCHOOLS有很多老式的代码。有更简单、更实用、更现代的方法来创造这些东西。这就是为什么我一直说Youtube是一个更好的起点。如果您堆叠了更具体的东西，我们可以在这里为您提供帮助，但您目前的问题比这更大。

上一个：SQL select where 语句中的未知标记

下一个：HTML href 变量值

响应式和粘性顶部菜单冲突

Responsive and sticky top menu conflict

评论

评论