Make a floated element a sticky

I have two columns, im trying to make the one on the left a sticky whn it reaches he top of the page, but I get
http://lukesspot.com/indus_links/
Can I not make a floated element a sticky?

urt, urt!,

Please validate the code that you posted and lettuce try again.:dolphin:

ok am using

why is it not working
http://lukesspot.com/indus_links/
shouldn’t the gray box be the sticky?

Your using flex so the sidebar is matching its height to the main content which has height 150vh.

Look back at the “How to…” link you posted. You will see a fixed height on the sticky element that is shorter than the scrolling content’s height.

#aside {
    width: 15%;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: gray;
    height:50vh; /*added this for testing*/
}

To use flex and keep from setting a fixed height on your menu you can nest a new element in your aside.

That new element will no longer be a flex item and the menu content can determine it’s height. I used a <ul> in the following example.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>San Diego: Configuration Management</title>
<style>

.wrapper {
  display: flex;
  justify-content: space-between;
}
.main {
  width: 85%;
  height: 150vh;
  background:#eee;
}
.aside {
  width: 15%;
  background:#ccc;
}
.menu {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background:red;
}

</style>
</head>
<body>

<div class="wrapper">
  <div class="aside">
    <ul class="menu">
      <li>menu item</li>
      <li>menu item</li>
      <li>menu item</li>
      <li>menu item</li>
    </ul>
  </div>
  <div class="main">
  </div>
</div>

</body>
</html>
2 Likes

align-self:flex-start on the side column would also work as long as you didn’t want full length backgrounds on the side column.

We had the same question a few days ago :slight_smile:

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.