JSFiddle - React, Tailwind, and code Playground

by Muhammad Hassaan

HTML

<div class="top-strip">Header</div>
<div class="fademe">
    <h3>Test</h3>
</div>
<div class="main-content">
    <span class="text"> Scroll down </span>
    <span class="text"> Scroll down </span>
    <span class="text"> Scroll down </span>
    <span class="text"> Scroll down </span>
    <span class="text"> Scroll down </span>
    <span class="text"> Scroll down </span>
</div>

CSS

html,
body {
    height: 200%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    background-color: #555;
    color: #fff;
}

.text { margin-top: 100px; display: block; }


div.top-strip{height:30px;display:block;border:1px solid #ccc;position:fixed;width:100%;}


div.fademe {
    width: 100%;
    position: fixed;
    top:35px;
    display:block;
    height:130px;
    background:blue;
    left: 0px;
}

div.main-content{position:relative;top:165px;}

JavaScript

var divs = $('.fademe');
       var item = document.getElementsByClassName('fademe')[0],
       style = window.getComputedStyle(item),
       leftVal = style.getPropertyValue('left'),
       lastScroll = 0;
$(window).on('scroll', function() {
   var st = $(this).scrollTop();
    console.log(leftVal);
    console.log(st);
    if(st < 100) {
       	console.log(leftVal);
        return;
    }else if(st > 100 && st < 300) {
    	if (st > lastScroll) {
    		//downscrolling
        	divs.css({ 'opacity' : (1 + st/200) });
        	$(divs).animate({left: '+=1'}, 10);
        	console.log('DownV');
        } else {
        	//upscrolling
        	divs.css({ 'opacity' : (1 - st/200) });
        	$(divs).animate({left: '-=1'}, 10);
        	console.log('Up^');
        }
    } else if(st > 300 && st < 400 ){
    	if( st < lastScroll) {
        	console.log(leftVal);
    		divs.css({ 'opacity' : (1 - st/200) });
        	$(divs).animate({left: '-=1'}, 10);
        	//Down
        	console.log('DownV');
        } else {
        	console.log(leftVal);
    		divs.css({ 'opacity' : (1 + st/200) });
        	$(divs).animate({left: '+=1'}, 10);
        	//up
        	console.log('Up^');
        }
    }
    lastScroll = st;
});