1

Есть горизонтальное меню. То есть, сверху на сайте есть полоса на которойй находятся ссылки на другие страницы, назовём их так (ссылка А, ссылка B, ссылка C). Вообщем обучное горизонтальное мень. Если в браузере прокручиваешь страницу вниз, то меню пропадает. Мне нужно чтобы при прокуртке страницы меню оставалось сверху в браузере - фиксированное горизонтальное меню. Это я реализовал. А теперь я хочу следующее. На меню находятся три ссылки по умолчанию. Когда я прокручиваю страницу вниз и меню фиксируется, то хочу чтобы две ссылки пропадали, а одна ссылка оставалась на месте.

1 ответ 1

1

Есть такой вариант решения:

window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  var link1 = document.querySelector('a[href="#news"]');
  var link2 = document.querySelector('a[href="#contact"]');
  if (currentScrollPos == 0) {
    link1.style.display = '';
    link2.style.display = '';
  } else {
    link1.style.display = 'none';
    link2.style.display = 'none';
  }
}
body {
  margin: 0;
  background-color: #f1f1f1;
  font-family: Arial, Helvetica, sans-serif;
}

#navbar {
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  display: block;
  transition: top 0.3s;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}
<div id="navbar">
  <a href="#home">Home</a>
  <a id="news" href="#news">News</a>
  <a id="contact" href="#contact">Contact</a>
</div>

<div style="padding:15px 15px 2500px;font-size:30px;margin-top:30px;">
  <p style="background-color: green">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus est in dignissim dignissim. Vivamus mollis risus et placerat convallis. Aliquam et ultrices massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
    himenaeos. Maecenas et lacus metus. Vivamus nec consectetur orci. Cras quis faucibus ligula. Curabitur sed orci ut magna aliquet efficitur. Etiam aliquam massa eu ultricies blandit. Aliquam bibendum pretium risus.</p>

  <p style="background-color: yellow">Suspendisse quis ligula lobortis, porta felis sit amet, mattis tortor. Praesent lorem eros, sollicitudin eget condimentum et, congue vitae risus. Donec dictum est eget nisl egestas, non imperdiet libero lobortis. In porta nunc tellus, eu vestibulum
    risus scelerisque in.</p>

  <p style="background-color: pink">Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi libero augue, dictum a ante vitae, dignissim tempus tellus.</p>

  <p style="background-color: orange">Nam non mattis enim. Morbi augue purus, porta a semper eget, egestas fringilla mi. Praesent auctor nunc id orci imperdiet, vitae volutpat ante auctor. Quisque ultricies eros est, ut luctus ex vehicula blandit. Ut sagittis tristique sem, in ullamcorper
    odio finibus vel. Etiam consectetur urna augue, non convallis massa tristique ac. Integer varius elementum libero, venenatis pellentesque nibh blandit et. Pellentesque cursus in ipsum id pharetra.</p>

  <p style="background-color: lightblue">Nullam tincidunt ultrices laoreet. Aenean dictum sem eget dolor volutpat, vel vulputate erat pharetra. Proin ultrices libero lectus, at placerat dui euismod a. Vestibulum consectetur, dui et tincidunt euismod, risus purus commodo ipsum, vitae porttitor
    enim lectus rhoncus urna. Curabitur laoreet odio sed dolor vehicula, eu tempus massa porttitor. Vestibulum quis fermentum est. Sed scelerisque placerat sem. Ut id elit vulputate eros gravida malesuada ac at libero. Curabitur imperdiet tortor mi, non
    finibus eros tincidunt at. In facilisis lorem turpis, eu tempor tellus cursus a. Duis vulputate nisi nec lorem faucibus commodo. Sed dictum tortor ut nunc tempus, sed porta ipsum varius. In eget aliquam neque, id convallis magna.</p>

  <p style="background-color: magenta">Sed eu quam at lorem lacinia scelerisque. Quisque nec lectus eu orci pulvinar fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec interdum massa non velit faucibus luctus. Fusce hendrerit faucibus
    nunc ut porta. Nam dignissim lectus non vehicula molestie. Vivamus convallis mattis malesuada. Nullam iaculis enim lacus, aliquet cursus velit tempor at. Vivamus odio nulla, porttitor convallis magna eu, hendrerit pharetra tellus.</p>

  <p style="background-color: red">Cras suscipit turpis massa, id porta augue efficitur vel. Suspendisse egestas eget massa aliquam eleifend. Maecenas at magna pretium, scelerisque tellus et, iaculis massa. Donec varius eros et felis viverra, vel commodo turpis tincidunt. Pellentesque
    ac ornare ex. Donec efficitur hendrerit dapibus. Morbi non finibus enim. Mauris maximus, dui sit amet fringilla porttitor, tellus sapien maximus lacus, quis porttitor leo lacus sed orci. Nam nec condimentum enim. Aenean sed ullamcorper augue. Fusce
    nisl est, blandit quis turpis eget, vehicula imperdiet tellus. Integer aliquet orci massa, quis maximus diam convallis vitae. Vestibulum sed enim et lacus blandit egestas. Nullam et elit quis erat volutpat dapibus. Aliquam et sem porttitor, eleifend
    nulla in, fermentum neque.</p>
</div>

1
  • Я не знаю кто ответил на данный вопрос. Но спасибо тебе. Именно так я хотел. Вы показали правильно. 29 апр 2020 в 10:00

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.