Sticky item staying relative to the parent

user_7921161 0
Viewed 34

I have a sticky sidebar that I'm trying to keep inside parent class. That is staying inside the .inner box.

Currently, it is overflowing into the .outside box.

Here is the JSFiddle with an example - https://jsfiddle.net/dky2eb3m/10/

HTML:

<div class="parent">
  <div class="other">

  </div>
  <div class="inner">
    <nav>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </nav>
    <div class="content">
      One
    </div>
    <div class="content two">
      TWO
    </div>
    <div class="content three">
      Three
    </div>
  </div>
</div>
<div class="outside">

</div>

SCSS

.content {
  height: 400px;
  background: red;

  &.two {
    background: green;
  }

  &.three {
    background: grey;
  }
}

.other {
  height: 300px;
  background: yellow;
}

.parent {
  //overflow: hidden;
}

nav {
  position: sticky;
  top: 25%;
  left: 100%;
  height: 0;

  ul {
    display: flex;
    flex-direction: column;

    li {
      list-style: none;
      position: relative;
      background: white;
      width: 80px;
      height: 80px;
      display: block;
      border-radius: 10px;
      color: #f47324;
    }
  }
}

.outside {
  height: 400px;
  background: orange;
}
sticky sass css html
1 Answers

You want your nav to be inside then you can do that like this.

* {
  box-sizing: border-box;
}

body {
  height: 3000px;
}

.content-parent {
  background: purple;
  width: 100%;
}

.sidebar {
  float: left;
  position: sticky;
  top: 30px;
}

nav ul {
  display: flex;
  flex-direction: column;
}
nav ul li {
  list-style: none;
  /* order: 999; */
  position: relative;
  background: white;
  width: 80px;
  height: 80px;
  display: block;
  border-radius: 10px;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #f47324;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.outside {
  height: 400px;
  background: orange;
}

.content {
  height: 400px;
  background: red;
}
.content.two {
  background: green;
}
.content.three {
  background: grey;
}

.other {
  height: 300px;
  background: yellow;
}
<div class="container">
  <div class="sidebar">
    <nav>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </nav>
  </div>
  <div class="content-parent">
    <div class="content">
      One
    </div>
    <div class="content two">
      TWO
    </div>
    <div class="content three">
      Three
    </div>
  </div>
</div>
<div class="outside">

</div>

user_143674160
Related