ScrollMagic - fixed menu

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

Thumbnail
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 Codepen.io
Copyright DM_Daria ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

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

  
</head>

<body>

  <div id="content">
  CONTENT
</div>

<div id="fixed-menu">
FIXED
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/DM_Daria/scrollmagic-fixed-menu-KNqJzr */
#content{
  margin-top: 500px;
  background: #ccc;
  margin-bottom: 1500px;
}

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

#fixed-menu.show{
  transform: translateX(0);
}

/*Downloaded from https://www.codeseek.co/DM_Daria/scrollmagic-fixed-menu-KNqJzr */
var ctrl = new ScrollMagic.Controller();

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

Comments