SCrollMagic div temp pinning

by Arnaud

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
<div class="wrapper">
    <div class="one" id="navbar">
     
      <ul>
      <li class="bout bout1">Goodies</li>
      <li class="bout bout2">Films</li>
      <li class="boutCentre boutCentre1">&#x2600;</li>
      <li class="boutCentre boutCentre2">&#x2600;</li>
      <li class="boutCentre boutCentre3">&#x2600;</li>
      <li class="bout bout3">Jeux</li>
      <li class="bout bout4">SĂ©ries</li>
      </ul>
    </div>
  <div id="logo">
 <img src="https://i.imgur.com/BAiSLOJ.png" alt="logo"
  </div>
</div>

CSS

.wrapper{
    height:3000px;
    width:100%;
    overflow:hidden;
}

.one{
    height:50px;
    width:100%;
    margin;auto !important;
    position:relative;
    top:415px;
}
.stickyMenu{
  position:fixed;
  top:0;
}

ul {
  text-align:center;
}
ul li{
    display:inline-block;
}

#logo img{
  width:100%;
  height:400px;
}
	.classBoutAnim {
						margin:0 20px;
              background-color:white;
						}
		.classBoutCentreAnim {
						margin:10px;
              background-color:red;
						}

JavaScript

jQuery(document).ready(function() {

$('html, body').animate({scrollTop: '+=400px'}, 800);

var timeline = new TimelineMax();


var tweenBoutX4 = TweenMax.to(".bout", 1, {className: "+=classBoutAnim"});
var tweenBoutX3 = TweenMax.to(".boutCentre", 1, {className: "+=classBoutCentreAnim"});
timeline.add(tweenBoutX4).add(tweenBoutX3);

var controller = new ScrollMagic.Controller();

$(function () {

				var scene = new ScrollMagic.Scene({  
        duration: 500,   
        offset: 415      })
								.setPin(".wrapper")
            .setTween(timeline)
					.addTo(controller);
         
         
       
			});
      
      
      
     
     
      
      
      
      
      
// STICKY MENU
	$(window).scroll(function() {
		var sticky = $('.one'),
			scroll = $(window).scrollTop();
		if (scroll > 1000) sticky.addClass('stickyMenu');
		else sticky.removeClass('stickyMenu');
	});
  
  // STICKY PUR JS
/*  
  window.onscroll = function() {myFunction()};

// Get the navbar
var navbar = document.getElementById("navbar");

// Get the offset position of the navbar
var sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
} 
*/
  
});