Блог

Главная - Вопросы по программированию - как создать прокручиваемое меню горизонтальной навигации, но отображаемое при прокрутке окна пользователя вниз

как создать прокручиваемое меню горизонтальной навигации, но отображаемое при прокрутке окна пользователя вниз

#javascript #html #css #navigation

#javascript #HTML #css #навигация

Вопрос:

Я хочу создать меню навигации, которое должно прокручиваться горизонтально. Но эта навигация должна отображаться, когда пользователь прокручивает окно вниз в браузере (мобильный рабочий стол).

Я опробовал этот код, чтобы меню навигации отображалось после прокрутки снизу, но его элемент не прокручивался по горизонтали. При удалении позиции: исправлено, тогда элемент прокручивается горизонтально.

Итак, я хочу, чтобы обе функции прокручивали навигацию по горизонтали отображали строку меню навигации, когда пользователь прокручивает окно вниз.

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

function scrollFunction() {
  if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {
    document.getElementById("navigation").style.top = "0";
  } else {
    document.getElementById("navigation").style.top = "-150px";
  }
}  
 #navigation {
  top: -50px;
  position: fixed;
}

.nav-header {
  background: #002347;
  color: #ffffff;
}

.nav-header a {
  color: #ffffff;
}

.nav-header nav {
  width: 100%;
}

.itemlist {
  padding: 6px 12px;
}

.itemlist:not(:last-child) {
  border-right: 1px solid #ece4e4;
}

.itemlist {
  font-size: 17px;
  font-weight: bold;
}

.itemlist,
.center {
  cursor: pointer;
  vertical-align: middle;
  display: inline-block;
}

.scrolltab {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.scrolltab::-webkit-scrollbar {
  display: none;
}  
 <div id="navigation" class="nav-header">
  <nav class="center scrolltab">
    <span class="itemlist"> About us </span>
    <span class="itemlist">Web Solution</span>
    <span class="itemlist">Web Application</span>
    <span class="itemlist">Scripting Language</span>
    <span class="itemlist">Andriod Application</span>
    <span class="itemlist">Contact</span>
  </nav>
</div>

<div style="padding:15px 15px 2500px;font-size:30px">
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

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

1. вы имеете в виду, что вы хотите, чтобы меню занимало всю ширину окна по горизонтали И появлялось только после определенной точки прокрутки? Я не уверен, что понимаю, что вы подразумеваете под «навигационным меню, которое прокручивается горизонтально»? Я не понимаю, как мы могли бы его прокручивать, на данный момент в нем всего пять элементов. Горизонтальная прокрутка — это то же самое, что и вертикальная прокрутка, но по оси X. Или у вас есть пример веб-страницы, чтобы показать мне?

2. Привет, @LaurentC, да, я имею в виду, что пункты меню должны прокручиваться по оси X, когда ширина больше, чем окно браузера.

3. И все меню навигации должно отображаться после точки прокрутки в этом случае, т.Е. 150.

Ответ №1:

Чтобы панель навигации прокручивалась горизонтально, вам нужно придать содержащему элементу ширину. т. Е. добавить

 #navigation {
  width:100%;
}

кроме того, у вас есть

 .scrolltab::-webkit-scrollbar {
    display: none;
}

Я не уверен, нужно ли вам это по какой-то причине, но, по крайней мере, в Microsoft Edge и Chrome это приводит к тому, что полоса прокрутки не отображается. Его удаление делает меню прокручиваемым.