Блог

Главная - Вопросы по программированию - Отзывчивый и липкий конфликт верхнего меню

Отзывчивый и липкий конфликт верхнего меню

#javascript #css #menu #responsive #sticky

#javascript #css #меню #отзывчивый #липкий

Вопрос:

Я застрял в конфликте для «липкого» и «отзывчивого» верхнего меню. Когда он не прокручивается, и я нажимаю кнопку BARS, чтобы открыть меню (в отзывчивом состоянии), все работает нормально. Если я прокручиваю вниз, а меню «ЛИПКОЕ», оно теряет «позицию: исправлено» и переходит на вершину (обратно в положение: относительное).

Вот мой 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>

Ответ №1:

Во-первых, не используйте float . Мы не уходим в 1995 году. Используйте flexbox или grid.

Во-вторых, ваш код повсюду. Несколько тегов скрипта в разделе HTML, многократное использование одного и того же медиа-запроса… Трудно читать ваш код.

В-третьих, то, что вы хотите сделать, можно сделать просто с помощью CSS. Вам нужен JS только для открытия подменю. Для этого просто добавьте класс.

Я предлагаю вам посмотреть видео на Youtube об адаптивном меню.

Комментарии:

1. Плохой ответ, мой друг, вопрос не в том, в какую эпоху мы уходим или какая альтернатива, все дело в конфликте сценариев! Это код W3school, я всего лишь новичок, и я только что пересек их два разных кода, один для липкого, а второй для отзывчивого, поэтому у меня возникла эта проблема, и float не слишком устарел, как вы упомянули, просто flexbox намного лучше, но кто-то все еще можетнайдите float достаточно для чего-то, А также; неразумно отвечать кому-то, кто просит чему-то научиться на форуме вопросов и ответов, чтобы учиться на YouTube!!!!

2. Я знаю, что он не очень хорошо представлен, но он из W3SCHOOLS, я думаю, он предназначен для образовательных целей, и вы можете заметить, что я действительно новичок в CSS и веб-дизайне в целом, я программист-аналитик в настольных и мобильных приложениях под RAD Studio (Delphi). моя проблема в том, что я никогда не превращалдля веб-дизайна, скажем, за 1 или 2 месяца до этого, в любом случае, извините, я попытаюсь отредактировать его и прокомментировать раздел, в котором проблема

3. отредактированный код, я сделал все возможное, все еще с Float, я должен начать с них, чтобы перейти к flexbox

4. В W3SCHOOLS много кодов старой школы. Есть более простые, практичные и современные способы создания этих вещей. Вот почему я продолжаю говорить, что Youtube — лучшее место для начала. Мы можем помочь вам здесь, если вы сосредоточитесь на чем-то более конкретном, но ваша текущая проблема серьезнее.