JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="top-menu">
  <li class="active">
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#div2">item1</a>
  </li>
  <li>
    <a href="#div3">hori slider</a>
  </li>

</ul>


    <div id="div1">
        
        
    </div>
    <div id="div2"></div>

<div id="div3">

  <div id="slider">
      <div class="navigatie">
	<a id="vorige">prev</a>
	<a id="volgende">next</a>
      </div>
  
  
  <ul>
      <li id="slide1">
      </li>
      <li id="slide2">
      </li>
      <li id="slide3">
      </li>
  </ul>
  
  </div>

</div>

CSS

body, html {
    height: 6000px;
    font-family: Helvetica, Arial;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background:url(img/background.png);
	background-attachment:fixed;
	height:100%;
}

#top-menu {
    position: fixed;
    z-index: 1;
    background:#000;
	width:100%;
	height:60px;
	list-style:none;
	z-index:100;
	

	margin:0 0 0 0;
    
}



#top-menu li {
    float: left;
}

#top-menu a {
	display:block;
	width:100px;
	text-align:center;
	line-height:50px;
	text-decoration:none;
	
	height:60px;
	
	

	color:#FFF;
 
}

#top-menu a:hover {
    
}

#top-menu li.active a {
	color:#FFF;
	
    
}



#div2 {
   height:100%;
   width:100%;
    background:#FF0;


}

#div1 {
   height:100%;
   width:100%;
    background:#0F0;

}

#object {
    position: fixed;
    
    top: 50%;
    height: 116px;
    width: 400px;
    background:url(img/logo.png)
}

#div3 {
   height:100%;
   width:100%;
   background:#C99

}

#div4 {
   height:101%;
   width:100%;
   background:#696;

}


/*slider */


#slider {
	height:100%;

	overflow: hidden;
}

#slider ul {
    white-space: nowrap;
		margin: 0 0 0 0;
	padding:0 0 0 0;
	height:100%;
	
}


#slider ul li {
	float:left;
	height:100%;
}


.navigatie {
	height: 40px;
	line-height: 40px;
	
	position:absolute;
	top:250%;
	width:100%;
	
	

}
.navigatie a {
	
	display: block;
	cursor: pointer;
	padding: 0 15px;
	background:#999;

}
#vorige {
	float:left;
	
}
#volgende {
	float:right;

	
}

#slide1{
	background:#0F0;
}
#slide2{
	background:#C63;
}
#slide3{
	background:#900;
}

JavaScript

$(document).ready(function(){
	var slides = $('#slider ul li');
	var slideAantal = slides.length;
	var slideBreedte = screen.width;
	var beeldHoogte = screen.height;
	var slideHuidig = 0;


		$('#slider ul').css('width', slideAantal * slideBreedte);
		$('#slider ul li').css('width', slideBreedte);
	

	$('.navigatie a').click(function() {
	
		if ($(this).attr('id') == 'volgende') {
		
			slideHuidig = slideHuidig + 1;
		}
	
		else {
		
			slideHuidig = slideHuidig - 1;
		}

	
		navigatie(slideHuidig);

		
		$('#slider ul').animate({
			'margin-left' : (-slideHuidig * slideBreedte)
		});
	});


	function navigatie(slideHuidig) {
		
		if (slideAantal - 1 == slideHuidig) {
			$('#volgende').hide()
		} 
		else {
			$('#volgende').show()
		}

		
		if (slideHuidig == 0) {
			$('#vorige').hide()
		} 
		else {
			$('#vorige').show()
		}
	}


	navigatie(slideHuidig);
});

window.onload=function(){

var lastId,
    topMenu = $("#top-menu"),
    topMenuHeight = topMenu.outerHeight()-60,
  
    menuItems = topMenu.find("a"),
   
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    }),
    noScrollAction = false;


menuItems.click(function(e){
    var href = $(this).attr("href"),
        offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
    noScrollAction = true;
    $('html, body').stop().animate({ 
        scrollTop: offsetTop
    },{
        duration: 300,
        complete: function() {
            menuItems
                .parent().removeClass("active")
                .end().filter("[href=" + href +"]").parent().addClass("active");
            setTimeout(function(){ noScrollAction = false; }, 10);
        }
    });
    e.preventDefault();
});






$(window).scroll(function(){
   if(!noScrollAction){
   
       var fromTop = $(this).scrollTop()+topMenuHeight;
       
  
       var cur = scrollItems.map(function(){
         if ($(this).offset().top < fromTop)
           return...