JSFiddle - React, Tailwind, and code Playground

by yurik417

HTML

<div class="landingNav">
    <ul>
        <li><a href="#land_1">landing link 1</a></li>
        <li><a href="#land_2">landing link 2</a></li>
        <li><a href="#land_3">landing link 3</a></li>
    </ul>
</div>

<div id="land_1" class="landingItem ">
        <div class="bg_1">
            1
        </div>
    </div>
    <div id="land_2" class="landingItem ">
        <div class="bg_2">
            2
        </div>
    </div>
    <div id="land_3" class="landingItem ">
        <div class="bg_3">
            3
        </div>
    </div>

CSS

body,
html {
	margin:0;
	padding:0;
	min-height:100%;
}

.landingNav {}
.landingNav ul {
	padding:0;
	margin:0;
	text-align:center;
	position:relative; 
	background:#000;
	display:block;
	margin:auto;
	border-radius:0 0 10px 10px;
}
.landingNav li {
	display:inline-block;
	vertical-align:top
}
.landingNav a {
	color:#09F;
	padding:20px 20px;
	display:inline-block;
	text-transform:uppercase;
	text-decoration:none;
    font:12px/1.2em arial;
}
.landingNav .cur {
	color:#fff;
}

.landingItem {
	font:500px/1000px Arial, Helvetica, sans-serif;
	font-weight:900;
	color:#000;
	text-align:center;
	position:relative;
	background:#fff;
	border-radius:20px;
	margin:0 -10px 20px;
}
.bg_1 {
	height:600px;
	line-height:600px;
}

.bg_2 {
	height:700px;
	line-height:700px;
}

.bg_3 {
	height:1000px;
	line-height:1000px;
}

.bg_4 {
	height:500px;
	line-height:500px;
}

.bg_5 {
	height:1600px;
	line-height:1600px;
}

.landingNav {
	position:absolute; 
	width:100%;
	top:0;
	left:0;
	z-index:999
}
.landingFix {
	position:fixed;
	width:100%;
	top:0;
	left:0;
}

JavaScript

/*
 * jQuery liLanding v 1.0
 *
 * Copyright 2013, Linnik Yura | LI MASS CODE | http://masscode.ru
 * Free to use
 *
 * 03.12.2013
 */
(function ($) {
	var methods = {
		init: function (options) {
			var p = {
				show: function (linkEl, landingItem) {}, 
				hide: function (linkEl, landingItem) {}
			};
			if (options) {
				$.extend(p, options);
			}
			return this.each(function () {
				var el = $(this);
				var elPos = el.offset().top;
				var wHalf = $(window).height()/2
				var scrollId = function(){};
				
				//assign events only links with anchors
				$('a[href^=#]',el).on('click',function(){
					var linkItem = $(this);
					if(!linkItem.is('.cur')){
						var linkHref = linkItem.attr('href');
						var linkTarget = $(linkHref);
						var linkTargetPos = linkTarget.offset().top;
						var windowPos = $(window).scrollTop();
						var animDuration = linkTargetPos - windowPos
						if(animDuration < 0){
							animDuration = animDuration*-1	
						}
						//scroll the page to the desired block
						if(linkTarget.length){
							$('html, body').stop(true).animate({scrollTop:linkTargetPos},animDuration,function(){
								$(window).trigger('scroll');
							});
						}
					}
					return false;
				})
				//stop the animation by scrolling
				var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
				if (document.attachEvent) //if IE (and Opera depending on user setting)
					document.attachEvent("on"+mousewheelevt, function(e){
						$('html, body').stop(true);		
					});
				else if (document.addEventListener) //WC3 browsers
					document.addEventListener(mousewheelevt, function(e){
						//e.detail //direction
						$('html, body').stop(true);
					}, false)
				//highlight the desired link in the menu by scrolling
				$(window).on('scroll',function(e){
					clearTimeout(scrollId);
					var windowPos = $(window).scrollTop();
					if(windowPos >...