如何使粘性 div 浮动在页面的其余部分？

Question

我有一个浮动菜单粘在 window 的顶部，只占其宽度的 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>

如何让粘性元素一直浮动，即右侧不显示白色space？

编辑：图像不能在背景上。它应该在 main 标签内，那里会有更多元素，包括文本和可能的其他图像。所有内容都应该一起滚动，但菜单除外，它必须贴在顶部。

Answer 1

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>

Answer 2

您可以使用背景 css 属性。您可以对图像标签使用绝对位置，或者如果您打算将图像用作背景，则考虑使用背景属性，下面我粘贴了一个示例代码以使用背景图像和 link 到背景属性用法.

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>

Answer 3

我不确定 position:sticky 是否可行。因为 sticky 应该与 static 定位的元素一起分配，以防万一。

我想您将不得不使用 JS 自己完成此操作。您可以优化它隐藏的方式并使用适当的转换，这应该不是问题。

这是来自 MDN -

The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.

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>

Answer 4

只需使用-- position: sticky;在 css 中使 div 变粘

Answer 5

首先，您可以将图片的位置设置为position : absolute;，然后移动到想要的位置。

由于该项目将不再粘附，我们可以制作一个空的 div 元素。此外，将图像放在导航之前（也可以在 CSS 中使用 z-index 属性）。

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>

Answer 6

您可以使用 z-index 作为 img 和 nav
或者，您可以创建 div，就像我用 opacity:0 创建的 div；对于假溢出；

可能会有帮助

已编辑：

img position :relative 因为你想要一个img触发器
我已经设置了你的元素id DOM name
我已经计算出你的导航高度是65，我把这个img自动置顶
不要批评我，我只是想帮忙。
谢谢

  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>

Answer 7

您可以考虑使用 float 和 shape-outside 技巧来确保元素不会占用 space:

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>

如何使粘性 div 浮动在页面的其余部分？

How to make a sticky div float over the rest of the page?

html

css

sticky