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

user_1086511 0
Viewed 1940

I have a floating menu sticky to the top of the window, and occupying only 1/4 of its width. The remaining 3/4 (as well as behind the menu's 1/4) should be occupied by the image on the next document section. However, the image initially appears below the menu, i.e. the menu is not floating as I want it to.

What I'm getting:

problem

What I want:

solution

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>

How do I make the sticky element float all the time, i.e. display no white space on its right side?

EDIT: The image cannot be on the background. It should be inside the main tag, where there will be more elements, including text and possibly other images. It all should scroll together, except for the menu, that must stick to the top.

sticky css html
7 Answers

You can consider float and shape-outside trick to make sure the element will take no 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>

Another idea is to consider a height:0 wrapper

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>

user_86203330

I'm not sure if it is possible with position:sticky. Because sticky is supposed to get allocated with the static positioned elements in case of no scolling.

I guess you will have to do this yourself using JS. You can optimise the way it is getting hidden & using proper transitions it shouldn't be of an issue.

This is from 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>

user_68084740

You can make use background css property. You could make use of position absolute to your image tag or if your intention is to use the image as background then consider using background properties, below i have pasted a sample codevto use background image and a link to the background properties usuage.

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>

user_16385960 

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>

user_79611310

First, you can set the position of the image to position : absolute; Then move it to the desired location.

Since the item will no longer stick, we can make an empty div element. Also, place the image before your navigation (can also use z-index property in 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>

user_142059210
  1. you can use z-index for the img and nav
  2. alternate, you can create div like a div i've creates with opacity:0; for fake overflow;

may help

edited:

  1. img position :relative because you want an img trigger
  2. i've set your id of your elements id DOM name
  3. i have been calculated your nav height is 65, i take this img top automaticaly
  4. don't judge me i'm just tryna help.
  5. thank you

  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>

user_141460550

just use-- position: sticky; in css to make div sticky

user_142062150
Related