Как сделать так, чтобы липкий div плавал над остальной частью страницы?

ProgramBox

Как сделать так, чтобы липкий div плавал над остальной частью страницы?

Post author:admin
Запись опубликована:6 апреля, 2023
Post category:Вопросы по программированию

#html #css #sticky

#HTML #css #липкий

Вопрос:

У меня есть плавающее меню, прикрепленное к верхней части окна и занимающее всего 1/4 его ширины. Оставшиеся 3/4 (а также за 1/4 части меню) должны быть заняты изображением в следующем разделе документа. Однако изображение изначально появляется под меню, то есть меню не плавающее, как я хочу.

Что я получаю:

Чего я хочу:

 body,ul {
  margin: 0;
  overflow-x:hidden;
}
header {
  background: green;
}
nav {
  background: #ff000080;
  width: 25vw;
  position: sticky;
  top: 0;
}
main img {
  width: 100vw;
}

 <header>Title</header>
<nav>
  <ul>
    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>
  </ul>
</nav>
<main>
  <img src='https://cdn.britannica.com/90/3890-050-F451C580/rainforest-coast-lowland-rainforests-Ecuador-tropics-evergreen.jpg' />
</main>

Как мне сделать так, чтобы липкий элемент постоянно плавал, т. Е. Не отображал пробелов с правой стороны?

РЕДАКТИРОВАТЬ: Изображение не может быть на заднем плане. Он должен быть внутри main тега, где будет больше элементов, включая текст и, возможно, другие изображения. Все это должно прокручиваться вместе, за исключением меню, которое должно располагаться вверху.

1. Разница между sticky и fixed заключается в том, что sticky прилипает к текущей позиции, а fixed всегда фиксируется. Для достижения желаемого вам нужно будет выполнить фиксированное позиционирование и добавить максимальное значение высоты вашего заголовка. Вы можете добиться этого без какого-либо javascript, если установите статическую высоту вашего заголовка.

2. @THEAMAZING Пожалуйста, прочтите мой комментарий к ответу Праджвала. Для этого подхода мне нужен JavaScript, потому что заголовок не фиксирован, поэтому его видимая высота изменяется при прокрутке.

Ответ №1:

Вы можете использовать float и shape-outside, чтобы убедиться, что элемент не займет места:

 body,ul {
  margin: 0;
  overflow-x:hidden;
}
header {
  background: green;
}
nav {
  background: #ff000080;
  width: 25vw;
  position: sticky;
  top: 0;
  float:left;
  shape-outside:linear-gradient(transparent,transparent);
}
main img {
  width: 100%;
}

 <header>Title</header>
<nav>
  <ul>
    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>
  </ul>
</nav>
<main>
  <img src='https://cdn.britannica.com/90/3890-050-F451C580/rainforest-coast-lowland-rainforests-Ecuador-tropics-evergreen.jpg' />
</main>

Другая идея — рассмотреть height:0 оболочку

 body,
ul {
  margin: 0;
  overflow-x: hidden;
}

header {
  background: green;
}

nav {
  background: #ff000080;
  width: 25vw;
}

.nav {
  position: sticky;
  top: 0;
  float: left;
  height:0;
}

main img {
  width: 100%;
}

 <header>Title</header>
<div class="nav">
  <nav>
    <ul>
      <li>link 1</li>
      <li>link 2</li>
      <li>link 3</li>
    </ul>
  </nav>
</div>
<main>
  <img src='https://cdn.britannica.com/90/3890-050-F451C580/rainforest-coast-lowland-rainforests-Ecuador-tropics-evergreen.jpg' />
</main>

1. Ваш фрагмент по-прежнему показывает пробелы справа от <nav> .

2. @Rodrigo можешь показать мне скриншот этого пространства? Я не вижу никакого пробела

3. @Rodrigo проверьте еще раз, вы, вероятно, тестировали с Firefox. Обновите значение shape-outsie, чтобы оно работало в Firefox

4. Спасибо, теперь это работает. Да, я использую Firefox. Разве в этом случае это не соответствует спецификации W3C?

5. Или это Chrome / хромированный, который не соответствует спецификации W3C?

Ответ №2:

Я не уверен, возможно ли это с position:sticky . Потому что sticky предполагается, что он будет выделен с static расположенными элементами в случае отсутствия scolling.

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

Это из MDN —

Элемент позиционируется в соответствии с обычным потоком документа, а затем смещается относительно его ближайшего предка прокрутки и содержащего блока (ближайшего предка уровня блока), включая элементы, связанные с таблицей, на основе значений top, right, bottom и left. Смещение не влияет на положение каких-либо других элементов.

https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky

 window.addEventListener('scroll', function(e) {
  if (window.scrollY > 25) {
    document.querySelector('nav').classList.add('sticky');
  } else {
    document.querySelector('nav').classList.remove('sticky');
  }
});

 body,
ul {
  margin: 0;
  overflow-x: hidden;
}

header {
  background: green;
}

nav {
  background: #ff000080;
  width: 25vw;
  position: fixed;
}

nav.sticky {
  top: 0;
}

main img {
  height: 100vw;
}

 <header>Title</header>

<nav>
  <ul>
    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>
  </ul>
</nav>

<main>
  <img src='https://cdn.britannica.com/90/3890-050-F451C580/rainforest-coast-lowland-rainforests-Ecuador-tropics-evergreen.jpg' />
</main>

1. Это почти работает, за исключением того, что меню должно следовать за заголовком в первые 25 пикселей прокрутки.

2. @Rodrigo вы можете вручную добавить top позицию для навигации на основе scrollY .

3. Да, это работает. Однако сам MDN рекомендует против этого: This constant moving and snapping will result in a jittery visual effect. One way to implement this without the scroll event listener is to use the CSS property designed for this purpose . Я подожду, появится ли решение на основе чистого CSS.

4. @Rodrigo Лучшим подходом было бы нажать заголовок немного позже вместе с состоянием изменения навигации. Таким образом, вы можете избежать многократного рисования.

5. Не понял, что вы имеете в виду.

Ответ №3:

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

https://www.w3schools.com/cssref/css3_pr_background.asp

 body,
ul {
  margin: 0;
  overflow-x: hidden;
}

header {
  background: green;
}

nav {
  background: #ff000080;
  width: 25vw;
  position: sticky;
  top: 0;
}

main img {
position: relative;
z-index: -1;
top: -55px;
}

    <header>Title</header>
  
<nav>
  <ul>
    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>
  </ul>
</nav>
<main>
<img src="https://cdn.britannica.com/90/3890-050-F451C580/rainforest-coast-lowland-rainforests-Ecuador-tropics-evergreen.jpg" />
</main>
<p>
This is a sample text
</p>

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

2. Я обновил свой фрагмент, пожалуйста, проверьте, и это может не быть реальным решением, может быть, это дает некоторую идею, поиграйте со свойством position. надеюсь, это поможет вашему запросу.

3. Таким образом, мне нужно заранее знать высоту <nav> . Если пользователь изменит размер шрифта (увеличит или уменьшит масштаб), он может сломаться.

Ответ №4:

Сначала вы можете установить положение изображения, чтобы position : absolute; затем переместить его в нужное место.

Поскольку элемент больше не будет прилипать, мы можем создать пустой div элемент. Кроме того, поместите изображение перед навигацией (также можно использовать z-index свойство в CSS).

 body,ul {
  margin: 0;
  overflow-x:hidden;
}
header {
  background: green;
}
nav {
  background: #ff000080;
  width: 25vw;
  position: sticky;
  top : 0;
}
main img {
  width: 100vw;
  height : 300px;
  /* add z-index */
  z-index : -1;
  /* change position */
  position : absolute;
  top : 20px;
}

 <header>Title</header>

<nav>
  <ul>
    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>
  </ul>
</nav>
<main>
  <img src='https://cdn.britannica.com/90/3890-050-F451C580/rainforest-coast-lowland-rainforests-Ecuador-tropics-evergreen.jpg' />
<!-- create new div to replace image -->
<div style = "width : 100vw; height : 300px;">
</div>
<span> 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. </span>
</main>

1. 1) Высота изображения не должна быть указана, чтобы не растягивать его. 2) Я добавил несколько абзацев в <main> после изображения, но не смог их увидеть.

2. Высота была установлена только для отображения прокрутки. Поскольку положение изображения теперь абсолютное, любые элементы, добавленные после изображения, должны идти после div. Кроме того, установите высоту div равной высоте изображения.

3. Если вам абсолютно необходимо добавить элементы в <main> , я отредактировал фрагмент, добавив div в <main> и установив для z-index изображения значение -1.

Ответ №5:

 body,ul {
  margin: 0;
  overflow-x:hidden;
}
header {
  background: green;
  /* changes */
  height: 5vh;
}
nav {
  background: #ff000080;
  width: 25vw;
  /* later changes*/
  position: fixed;
  top: 5vh;
}
main img {
  width: 100vw;
  /* changes */
  position: absolute;
  top: 5vh;
  z-index: -1;
}

 <header>Title</header>
<nav>
  <ul>
    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>
  </ul>
</nav>
<main>
  <img src='https://cdn.britannica.com/90/3890-050-F451C580/rainforest-coast-lowland-rainforests-Ecuador-tropics-evergreen.jpg' />
</main>

Ответ №6:

вы можете использовать z-index для изображений и навигации
альтернативно, вы можете создать div, подобный div, который я создал с непрозрачностью: 0; для поддельного переполнения;

может помочь

отредактировано:

положение img: относительное, потому что вы хотите триггер img
я установил идентификатор вашего элемента id DOM name
я рассчитал, что ваша высота навигации равна 65, я автоматически беру этот img top
не осуждайте меня, я просто пытаюсь помочь.
Спасибо

   function SetTop() {
   
    var a = document.getElementById("nav").offsetHeight;
    var b = document.getElementById("img");
    // this 0 because top of img overlapping the "sticky position"
    b.setAttribute("style", "top : " (0-a) "px");
  }

 body,ul {
  margin: 0;
  overflow-x:hidden;
}
header {
  background: green;
/* you need height for position top of img */
}
nav {
  background: #ff000080;
  width: 25vw;
  position: sticky;
  top: 0;

z-index: 1;
}
main img {
  /* this top need a height from a header */
  top: 0;
  position: relative;
  width: 100vw;
  z-index: -1;
  
}
   
div {
 color: black;
 }

  <body onload="SetTop()"/>
  <header>Title</header>
    <nav id="nav">
     <ul>
       <li>link 1</li>
       <li>link 2</li>
       <li>link 3</li>
     </ul>
    </nav>
  <main>
    <img src='https://cdn.britannica.com/90/3890-050-F451C580/rainforest-coast-lowland-rainforests-Ecuador-tropics-evergreen.jpg' id="img" />
  </main>

   <div>
    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 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>

1. Текст должен располагаться после изображения, а не над ним.

2. Для этого «липкого» нужен элемент, который срабатывает {position: relative;} или except absolute. если вы хотите использовать <img> в качестве триггера, вы можете изменить <img> {position: relative}, затем сделайте вершину <img> равной высоте <nav>, для этого нужно script.js чтобы вычислить вашу высоту <nav>.. но я попробую

Ответ №7:

просто используйте— position: sticky; в css, чтобы сделать div липким

1. Если вы прочитаете мой CSS, вы увидите, что я уже это делаю.

2. он уже использует position как sticky . Вы можете поиграть с фрагментом кода, который он добавил (просто нажмите на Copy snippet to answer ), и посмотреть, сможете ли вы найти решение.