CODEWITHSUNDEEP
htmlcsstransition
Martin Widarmadi
Martin Widarmadi

Reputation: 1

Sidebar fixed clipping

i wanna learn make some color transition for my sidebar when i scroll from white section to black section. I'm make the nav to be absolute and the ul tag to be fixed. I want when I'm in the white section, the navigation background color to be black and vice versa

This is the basic code:

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.section {
  min-height: 100vh;
  position: relative;
}

.section-white {
  background-color: white;
}

.section-black {
  background-color: black;
}

nav {
  position: absolute;
  top: 0;
  left: 0;
}

nav ul {
  width: 150px;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  list-style: none;
  height: 100%;
  gap: 1rem;
}

.section-white nav ul {
  background-color: black;
  color: white;
}

.section-black nav ul {
  background-color: white;
  color: black;
}
<body>
  <!-- Section white -->
  <div class="section section-white">
    <nav>
      <ul>
        <li>link1</li>
        <li>link2</li>
        <li>link3</li>
        <li>link4</li>
        <li>link5</li>
      </ul>
    </nav>
  </div>

  <!-- Section black -->
  <div class="section section-black">
    <nav>
      <ul>
        <li>link1</li>
        <li>link2</li>
        <li>link3</li>
        <li>link4</li>
        <li>link5</li>
      </ul>
    </nav>
  </div>
</body>

Stackblitz

Upvotes: -3

Views: 37

Answers (1)

A Haworth
A Haworth

Reputation: 36615

There is a basic problem with the HTML structure.

You need just one instance of the nav element and for it to remain in place at the side of the viewport while the sections get scrolled.

So, take it out of the sections and place it above them (in the z axis sense) with a z-index so they can be seen. They remain fixed as you have them, though this snippet removes the justify-content centering so the nav remains more to one side.

Then to make the characters visible against both a white and a black background mix-blend-mode: difference is used with the initial color being white. White on white will then become black and white on black stays white.

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.section {
  min-height: 100vh;
  position: relative;
}

.section-white {
  background-color: white;
}

.section-black {
  background-color: black;
}

nav {
  position: absolute;
  top: 0;
  left: 0;
}

nav ul {
  width: 150px;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
  height: 100%;
  gap: 1rem;
  color: white;
  z-index: 1;
  mix-blend-mode: difference;
}
<body>
  <nav>
    <ul>
      <li>link1</li>
      <li>link2</li>
      <li>link3</li>
      <li>link4</li>
      <li>link5</li>
    </ul>
  </nav>
  <!-- Section white -->
  <div class="section section-white">
  </div>

  <!-- Section black -->
  <div class="section section-black">
  </div>
</body>

Upvotes: 1

Related Questions