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

body {
  margin: 0;
  padding: 0;
}

#navbar {
  width: 100%;
  /* position: fixed; */
}


/*NAVBAR-CONTACT*/

.navbar-contact {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgba(242, 122, 61, 1);
  width: 100%;
  list-style-type: none;
}

.navbar-contact li {
  padding: 10px 16px;
  float: right;
}

.navbar-contact li:first-child {
  padding-right: 25%;
}

.navbar-contact li a {
  display: block;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  text-decoration: none;
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 12px;
}

.navbar-contact li a:hover {
  text-decoration: underline;
}


/*NAVBAR-MENU*/

.navbar-menu {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgba(33, 33, 33, 0.8);
  list-style-type: none;
  text-align: center;
  position: fixed;
  width: 100%;
}

.navbar-menu li {
  display: inline-block;
}

.navbar-menu li a {
  display: block;
  color: rgb(190, 190, 190);
  text-align: center;
  text-decoration: none;
  font-family: Verdana, Tahoma, sans-serif;
  font-weight: 900;
  font-size: 16px;
  padding: 20px 16px;
}

.navbar-menu li a:hover {
  color: rgba(255, 255, 255, 1);
  text-shadow: 0 0 10px rgba(255, 255, 255, 1);
}

#content {
  margin: 0;
  padding: 80px 60px 0 60px;
  height: 300vh;
}
<!DOCTYPE html>
<html>

<head>
  <title>Website</title>
  <link rel="stylesheet" type="text/css" href="style/style.css">
</head>

<body>
  <!-- Navbar -->
  <nav id="navbar">
    <ul class="navbar-contact">
      <li><a href="#">info@domain.co.uk</a></li>
      <li><a href="#">(XXX) XXXX XXXX</a></li>
    </ul>
    <ul class="navbar-menu">
      <li><a href="#">About</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">Clients</a></li>
    </ul>
  </nav>
  <div id="content">
    Lorem ipsum dolor 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
  </div>
</body>

</html>
0
rivia 8 Окт 2020 в 02:59

2 ответа

Лучший ответ

Самый простой способ сделать это в CSS - использовать position: sticky;

Вот пример из w3schools (https://www.w3schools.com/howto/howto_css_sticky_element.asp):

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

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

<!-- Navbar -->
<nav id="navbar">
    <ul class="navbar-contact">
        <li><a href="#">info@domain.co.uk</a></li>
        <li><a href="#">(XXX) XXXX XXXX</a></li>
    </ul>
</nav>
<ul class="navbar-menu" style="position: sticky;">
    <li><a href="#">About</a></li>
    <li><a href="#">Courses</a></li>
    <li><a href="#">Clients</a></li>
</ul>

Затем просто добавьте указанный выше css в свое навигационное меню, например:

/*NAVBAR-MENU*/

.navbar-menu {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgba(33, 33, 33, 0.8);
  list-style-type: none;
  text-align: center;
  width: 100%;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

(Обратите внимание, что я удалил position: fixed;)

1
Eric Nelson 8 Окт 2020 в 00:42

Вы можете попробовать javascript. Я копирую ваш код и пробую использовать этот ресурс w3schools ... попробуйте следующее:

<script>
    var prevScrollpos = window.pageYOffset;
    window.onscroll = function() {
    var currentScrollPos = window.pageYOffset;
    if (prevScrollpos > currentScrollPos) {
        document.getElementById("navbar").style.top = "0";
    } else {
        document.getElementById("navbar").style.top = "-50px";
    }
    prevScrollpos = currentScrollPos;
    }

</script>

Затем добавьте CSS в свой #navbar:

#navbar{
width: 100%;
top: 0;
transition: top 0.3s;
position: fixed;}

Подробнее об этом можно узнать здесь: https://www.w3schools.com/howto/howto_js_navbar_hide_scroll. жерех

0
MrT 8 Окт 2020 в 00:32