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/debug.addIndicators.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="navbar" 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">
  
  <div class="logoB">B
  </div>
   <div class="logoP">P
  </div>
 <img src="https://i.imgur.com/2fYUqP7.png" alt="logo"
  </div>
</div>

CSS

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

.navbar{
    height:50px;
    width:100%;
    margin;auto !important;
    position:relative;
    top:450px;
    z-index:2;
}
.stickyMenu{
  position:fixed;
  top:0;
}

ul {
  text-align:center;
}
ul li{
    display:inline-block;
}
#logo{
z-index:1;
width:1000px;
height:595px;
margin:auto;
}

.stickyLogo{
  position:fixed;
  top:-360px;
  width:100%;
 
}
#logo img{
  width:100%;
  height:100%;
}
	.classBoutAnim {
						margin:0 20px;
              background-color:none;
						}
		.classBoutCentreAnim {
						margin:10px;
              color:red;
              position:relative;
              top:20px;
						}
									
.logoB, .logoP{
  font-size:150px;
  position:absolute;
  color:red;
}

.logoB{
  
  top:120px;
 left:100px;}

.logoP{
  
  top:120px;
 right:100px;}

.tweenLettreB{
  top:120px;
  left:0;
  
}
.tweenLettreP{
  top:120px;
  right:0;
  
}

JavaScript

jQuery(document).ready(function() {

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


// ANIM BOUTONS SCROLLING
var timelineBout = new TimelineMax();

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

var controllerBoutons = new ScrollMagic.Controller();

$(function () {

				var tweenAnimBoutons = new ScrollMagic.Scene({  
        duration: 500,   
        offset: 415      })
								.setPin(".wrapper")
            .setTween(timelineBout)
					.addTo(controllerBoutons);
         
         
       
			});
      
     // ANIM LETTRES B P SCROLLING 
      
 var timelineLettres = new TimelineMax();

var tweenLettreB = TweenMax.to(".logoB", 0.5, {className: "+=tweenLettreB"}, "100");
var tweenLettreP = TweenMax.to(".logoP", 0.5, {className: "+=tweenLettreP"}, "100");

timelineLettres.add(tweenLettreB).add(tweenLettreP);

var controllerLettres = new ScrollMagic.Controller();

$(function () {

				var tweenAnimLettres = new ScrollMagic.Scene({  
        duration: 0,   
        offset: 450      })
								.setPin(".wrapper")
            .setTween(timelineLettres)
					.addTo(controllerLettres);
         
         
       
			});    
     
      
      
      
      
      
// STICKY MENU
	$(window).scroll(function() {
		var sticky = $('.navbar'),
			scroll = $(window).scrollTop();
		if (scroll > 500) sticky.addClass('stickyMenu');
		else sticky.removeClass('stickyMenu');
	});
 // STICKY logo
	$(window).scroll(function() {
		var sticky2 = $('#logo'),
			scroll = $(window).scrollTop();
		if (scroll > 450) sticky2.addClass('stickyLogo');
		else sticky2.removeClass('stickyLogo');
	}); 
  // 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...