Блог

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

Как создать простой липкий элемент навигации в сторону содержимого?

#html #css #sticky

#HTML #css #липкий

Вопрос:

В следующем примере я пытаюсь создать макет, в котором навигация будет:

  1. При прокрутке вниз всегда оставайтесь привязанными к началу
  2. Всегда оставайтесь слева (не полностью слева от окна браузера) от содержимого, которое может прочитать пользователь
  3. Не допускайте, чтобы какое-либо пространство занималось фактическим размером элемента навигации

 header h1 {
  text-align: center;
}

main {
  display: block;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

nav {
  border: 1px solid #000;
  width: 200px;
  position: sticky;
  top: 0;
  right: 0;
  background-color: orange;
}

nav ul {
  list-style: none;
  padding: 0;
  text-align: center;
}

nav ul a {
  display: block;
  border: 1px solid #000;
  margin: 5px 0;
  padding: 5px;
}  
 <div class="some-container">
  <header>
    <h1>
      Some header
    </h1>
  </header>
  <nav>
    <ul>
      <li><a href="#below">Below</a></li>
      <li><a href="#above">Above</a></li>
    </ul>
  </nav>
  <main>
    <h1>
      Below is some content
    </h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius a. Etiam ut dignissim lacus, ut iaculis mi.
      Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra. Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et molestie purus sodales. Vestibulum ornare ac nisl ut
      dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque tellus quam, suscipit non enim et, pellentesque
      varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum, nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus pellentesque accumsan. Duis maximus augue id lacus
      tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo, porttitor at faucibus ut, sodales id erat.
    </p>
    <p>
      Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus nec cursus. Nullam ut arcu lacus. Vivamus eleifend
      ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
    </p>
    <p>
      Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est, iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus tortor. Fusce in laoreet lacus. Cras dui sapien,
      convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget ex.
    </p>
    <p>
      Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam, pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at euismod orci felis sit amet neque. Maecenas fringilla
      enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla. Integer imperdiet massa eu orci faucibus
      mattis.
    </p>
    <h1 id="above">Above all</h1>
  </main>
</div>

Я попытался использовать right свойство (на nav селекторе), чтобы посмотреть, могу ли я использовать его, чтобы привязать его к контейнеру с фактическим содержимым внутри, но оно вообще ничего не делает. Большинство веб-страниц, которые я смог найти с навигацией по сторонам, имеют тенденцию касаться сторон браузера, и это не то решение, которое я ищу, что затрудняет мне поиск решения этой проблемы.

Как я собираюсь сделать страницу похожей:

Намерение

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

1. вы можете создать липкий элемент. читайте здесь.

2. Я уже использовал липкий элемент (см. Код в моем вопросе). @DhruviMakvana

Ответ №1:

Вот мое решение. Я завернул nav и main в дополнительный контейнер, присвоив ему имя класса some-container-inside . В css я изменил все свои правки. Надеюсь, это то, что вам нужно.

 header h1 {
  text-align: center;
}

main {
  display: block;
  max-width: 500px;
  /*margin-left: auto;*/  /*delete this it*/
  /*margin-right: auto;*/ /*delete this it*/
  width: 100%;
}

main h1 {
  margin-top: 0; /*add this it*/
}

nav {
  display: table; /*add this it*/
  border: 1px solid #000;
  width: 200px;
  position: sticky;
  top: 0;
  right: 0;
  background-color: orange;
  margin-right: 25px; /*add this it*/
  margin-left: 25px; /*add this it*/
}

nav ul {
  list-style: none;
  padding: 0;
  text-align: center;
}

nav ul a {
  display: block;
  border: 1px solid #000;
  margin: 5px 0;
  padding: 5px;
}

.some-container-inside {
  display: flex; /*add this it*/
  justify-content: center; /*add this it*/
}  
 <div class="some-container">
  <header>
    <h1>
      Some header
    </h1>
  </header>
  <div class="some-container-inside">
  <nav>
    <ul>
      <li><a href="#below">Below</a></li>
      <li><a href="#above">Above</a></li>
    </ul>
  </nav>
  <main>
    <h1>
      Below is some content
    </h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius a. Etiam ut dignissim lacus, ut iaculis mi.
      Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra. Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et molestie purus sodales. Vestibulum ornare ac nisl ut
      dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque tellus quam, suscipit non enim et, pellentesque
      varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum, nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus pellentesque accumsan. Duis maximus augue id lacus
      tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo, porttitor at faucibus ut, sodales id erat.
    </p>
    <p>
      Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus nec cursus. Nullam ut arcu lacus. Vivamus eleifend
      ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
    </p>
    <p>
      Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est, iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus tortor. Fusce in laoreet lacus. Cras dui sapien,
      convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget ex.
    </p>
    <p>
      Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam, pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at euismod orci felis sit amet neque. Maecenas fringilla
      enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla. Integer imperdiet massa eu orci faucibus
      mattis.
    </p>
    <h1 id="above">Above all</h1>
  </main>
  </div>
</div>

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

1. Это то, что я искал, хотя установка display свойства nav элемента в значение table , не добавит ли это непреднамеренное поведение? Я имею в виду, что прочитал что-то о том, чтобы не использовать таблицы для оформления веб-страниц и всего остального. Я попытался использовать align-self: flex-start вместо этого. Тем не менее, отличное решение.

2. @Barrosy, отображение таблицы — это обычная практика. Да, я тоже пробовал align-self: flex-start , и все работает хорошо, но tables у них хорошая cross-browser совместимость. Спасибо, и я был рад помочь 🙂

Ответ №2:

Этот код вы попробуете.

надеюсь, вам поможет.

я добавляю свойство position в некоторый тег класса.

пример: заголовок h1, навигация. и новый класс some-container .

 header h1 {
  text-align: center;
  position: absolute;
  right: 850px;
  top: 50px;
}

main {
  display: block;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

nav {
  border: 1px solid #000;
  width: 200px;
  position: sticky;
  z-index: 100;
  top: 135px;
  left: 480px;
  background-color: orange;
}

nav ul {
  list-style: none;
  padding: 0;
  text-align: center;
}

nav ul a {
  display: block;
  border: 1px solid #000;
  margin: 5px 0;
  padding: 5px;
}

.some-container {
  position: relative;
}  
 <div class="some-container">
  <header>
    <h1>
      Some header
    </h1>
  </header>
  <nav>
    <ul>
      <li><a href="#below">Below</a></li>
      <li><a href="#above">Above</a></li>
    </ul>
  </nav>
  <main>
    <h1>
      Below is some content
    </h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius a. Etiam ut dignissim lacus, ut iaculis mi.
      Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra. Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et molestie purus sodales. Vestibulum ornare ac nisl ut
      dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque tellus quam, suscipit non enim et, pellentesque
      varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum, nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus pellentesque accumsan. Duis maximus augue id lacus
      tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo, porttitor at faucibus ut, sodales id erat.
    </p>
    <p>
      Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus nec cursus. Nullam ut arcu lacus. Vivamus eleifend
      ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
    </p>
    <p>
      Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est, iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus tortor. Fusce in laoreet lacus. Cras dui sapien,
      convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget ex.
    </p>
    <p>
      Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam, pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at euismod orci felis sit amet neque. Maecenas fringilla
      enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla. Integer imperdiet massa eu orci faucibus
      mattis.
    </p>
    <h1 id="above">Above all</h1>
  </main>
</div>

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

1. Допустим, это должна быть адаптивная веб-страница, nav элемент не останется в том же положении, которое я рассмотрел в своем вопросе при масштабировании окна (я знаю, что я не упоминал повторяемость, но предыдущий упомянутый ответ предложил лучшее решение).

Ответ №3:

Версия 1: HTML / CSS

Изменения, которые я внес в:

HTML: NAV элемент находится в MAIN элементе

CSS: для NAV элемента установите стиль margin-left: -230px; и margin-bottom: -130px;

В этой версии, если вы добавляете новый пункт меню, вы должны вручную установить margin-bottom:

Если вы хотите, чтобы это делалось автоматически, см. Версию 2 ниже в этом сообщении

 header h1 {
    text-align: center;
}

main {
    display: block;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

nav {
    border: 1px solid #000;
    width: 200px;
    position: sticky;
    top: 0;
    margin-left: -230px;
    margin-bottom: -130px;
    background-color: orange;
}

nav ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

nav ul a {
    display: block;
    border: 1px solid #000;
    margin: 5px 0;
    padding: 5px;
}  
 <div class="some-container">
    <header>
        <h1>
            Some header
        </h1>
    </header>

    <main>

        <nav>
            <ul>
                <li><a href="#below">Below</a></li>
                <li><a href="#above">Above</a></li>
            </ul>
        </nav>

        <h1>
            Below is some content
        </h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis
            auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius
            a. Etiam ut dignissim lacus, ut iaculis mi.
            Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra.
            Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et
            molestie purus sodales. Vestibulum ornare ac nisl ut
            dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus
            porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque
            tellus quam, suscipit non enim et, pellentesque
            varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum
            rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum,
            nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus
            pellentesque accumsan. Duis maximus augue id lacus
            tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo,
            porttitor at faucibus ut, sodales id erat.
        </p>
        <p>
            Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum
            velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus
            nec cursus. Nullam ut arcu lacus. Vivamus eleifend
            ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
        </p>
        <p>
            Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est,
            iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus
            tortor. Fusce in laoreet lacus. Cras dui sapien,
            convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget
            ex.
        </p>
        <p>
            Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam,
            pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at
            euismod orci felis sit amet neque. Maecenas fringilla
            enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo
            vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla.
            Integer imperdiet massa eu orci faucibus
            mattis.
        </p>
        <h1 id="above">Above all</h1>
    </main>
</div>

Версия 2: HTML / CSS / JS

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

Важно: код JS должен быть добавлен в нижней части кода страницы

 var nav = document.getElementsByTagName('nav')[0];
nav.setAttribute('style', 'margin-bottom:-'   (nav.offsetHeight   30)   'px');  
 header h1 {
    text-align: center;
}

main {
    display: block;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

nav {
    border: 1px solid #000;
    width: 200px;
    position: sticky;
    top: 0;
    margin-left: -230px;
    background-color: orange;
}

nav ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

nav ul a {
    display: block;
    border: 1px solid #000;
    margin: 5px 0;
    padding: 5px;
}  
 <div class="some-container">
    <header>
        <h1>
            Some header
        </h1>
    </header>

    <main>

        <nav>
            <ul>
                <li><a href="#below">Below</a></li>
                <li><a href="#above">Above</a></li>
                <li><a href="#above">Contacts</a></li>
            </ul>
        </nav>

        <h1>
            Below is some content
        </h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc nisl, cursus quis nisi id, iaculis
            auctor ex. Donec dapibus ultricies fringilla. Phasellus posuere lobortis orci, ut bibendum nibh varius
            a. Etiam ut dignissim lacus, ut iaculis mi.
            Donec cursus semper libero. Vivamus tincidunt magna a orci porta, eget faucibus tellus pharetra.
            Pellentesque dapibus tincidunt ligula et venenatis. Nunc ullamcorper purus ac neque sagittis, et
            molestie purus sodales. Vestibulum ornare ac nisl ut
            dignissim. Vestibulum nec maximus neque. Ut euismod, velit quis pharetra venenatis, lectus metus
            porttitor sapien, id bibendum nisi ex ac odio. Aenean quis diam sed metus posuere pellentesque. Quisque
            tellus quam, suscipit non enim et, pellentesque
            varius magna. Quisque euismod massa vitae ex blandit interdum. Aliquam fermentum congue eros elementum
            rutrum. Donec sit amet nunc a mi tincidunt pulvinar accumsan a purus.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus turpis a libero fermentum,
            nec commodo dolor interdum. Proin fringilla finibus hendrerit. Phasellus rutrum lectus sit amet metus
            pellentesque accumsan. Duis maximus augue id lacus
            tempus interdum. Maecenas ut convallis nisi. Cras porta risus at massa vehicula semper. Nunc odio justo,
            porttitor at faucibus ut, sodales id erat.
        </p>
        <p>
            Integer fermentum ut felis a luctus. Suspendisse enim elit, finibus at erat sit amet, ultrices rutrum
            velit. Proin eget mi et massa porttitor tincidunt a tempus ipsum. Pellentesque maximus pharetra lectus
            nec cursus. Nullam ut arcu lacus. Vivamus eleifend
            ultrices diam nec hendrerit. Ut et malesuada urna, id luctus risus.
        </p>
        <p>
            Vestibulum accumsan sed libero at rutrum. In id tristique magna, id faucibus quam. Quisque nisi est,
            iaculis ut interdum at, varius et quam. Proin tempus nunc id libero viverra interdum. Vivamus id risus
            tortor. Fusce in laoreet lacus. Cras dui sapien,
            convallis sed turpis eu, porttitor luctus justo. Praesent mi augue, sodales in cursus ut, pulvinar eget
            ex.
        </p>
        <p>
            Vestibulum ex urna, viverra vel risus ultricies, facilisis vulputate velit. Nullam semper urna diam,
            pulvinar imperdiet tortor egestas fermentum. Ut volutpat, mi at aliquet porta, metus augue tempus ex, at
            euismod orci felis sit amet neque. Maecenas fringilla
            enim ac accumsan vestibulum. Suspendisse pellentesque consectetur urna. Maecenas laoreet fringilla leo
            vitae ultrices. Aenean sodales auctor nibh et eleifend. Donec semper facilisis mauris vel fringilla.
            Integer imperdiet massa eu orci faucibus
            mattis.
        </p>
        <h1 id="above">Above all</h1>
    </main>
</div>

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

1. В этом решении нет ничего плохого, кроме того, что использование JavaScript кажется излишним для целей моего вопроса.

2. Конечно! Итак, я сделал два варианта, чтобы вы могли решить, какой из них будет для вас более полезным