ScrollMagic - fixed menu

In this example below you will see how to do a ScrollMagic - fixed menu with some HTML / CSS and Javascript

This awesome code was written by DM_Daria, you can see more from this user in the personal repository.
You can find the original code on
Copyright DM_Daria ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>ScrollMagic - fixed menu</title>
      <link rel="stylesheet" href="css/style.css">



  <div id="content">

<div id="fixed-menu">
  <script src=''></script>
<script src=''></script>


    <script  src="js/index.js"></script>



/*Downloaded from */
  margin-top: 500px;
  background: #ccc;
  margin-bottom: 1500px;

  position: fixed;
  left: 0;
  top: 40%;
  height: 150px;
  width: 50px;
  background: #000;
  transition: .5s  ease-out;
  transform: translateX(-120%);
  transform: translateX(0);

/*Downloaded from */
var ctrl = new ScrollMagic.Controller();

var fixedMenu = new ScrollMagic.Scene({
  triggerElement: '#content',
  triggerHook: 0
}).setClassToggle('#fixed-menu', 'show')