distractdiverge/jsbin.mujup.css

## jsbin.mujup.css
html, body{
    height:150%;
}

.floating-isi {
    background: #85144B;
    position:fixed;
    bottom:0;
    height:30%;
    color:White;
}

.content-isi {
    background:#0074D9;
    color:White;
}

## jsbin.mujup.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <meta charset="utf-8">
  <title>Floating ISI Example</title>
</head>
<body>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non felis dignissim, sagittis felis eu, tristique lectus. Integer condimentum tincidunt nisl. Sed imperdiet vehicula lectus. Maecenas ligula purus, suscipit quis fermentum ac, lacinia nec diam. Nullam purus est, elementum dignissim lectus ac, suscipit hendrerit nisl. Suspendisse ultricies lectus in leo porta consectetur. Vestibulum at dui in massa egestas vestibulum sit amet a lectus. Sed feugiat vel est at ultricies. Integer sed tempus felis. Duis mattis non ligula porttitor vehicula. Donec ac tortor vel dolor venenatis ullamcorper quis facilisis mi. Sed elementum convallis nisl, vitae rutrum leo fringilla at. Donec faucibus enim id laoreet condimentum. Aenean volutpat elit sapien, faucibus sollicitudin risus congue ac. Sed fermentum enim et auctor vulputate. Nunc vulputate neque ut posuere adipiscing.</p>
    <p>Mauris dignissim id lorem ac feugiat. Phasellus volutpat placerat dolor id sodales. Maecenas euismod enim et metus ultricies facilisis. Etiam non consequat mi. Nullam a dui consectetur, semper odio eget, lacinia mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dolor turpis, aliquam sed vulputate nec, faucibus nec risus. Quisque posuere enim id nunc dignissim placerat. Nulla consectetur massa risus, sed mattis nisi laoreet vitae.</p>
  </div>
  <div class="content-isi">
    <h3>ISI</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non felis dignissim, sagittis felis eu, tristique lectus. Integer condimentum tincidunt nisl. Sed imperdiet vehicula lectus. Maecenas ligula purus, suscipit quis fermentum ac, lacinia nec diam. Nullam purus est, elementum dignissim lectus ac, suscipit hendrerit nisl. Suspendisse ultricies lectus in leo porta consectetur. Vestibulum at dui in massa egestas vestibulum sit amet a lectus. Sed feugiat vel est at ultricies. Integer sed tempus felis. Duis mattis non ligula porttitor vehicula. Donec ac tortor vel dolor venenatis ullamcorper quis facilisis mi. Sed elementum convallis nisl, vitae rutrum leo fringilla at. Donec faucibus enim id laoreet condimentum. Aenean volutpat elit sapien, faucibus sollicitudin risus congue ac. Sed fermentum enim et auctor vulputate. Nunc vulputate neque ut posuere adipiscing.</p>
  </div>
  <div class="floating-isi">
    <h3>ISI</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non felis dignissim, sagittis felis eu, tristique lectus. Integer condimentum tincidunt nisl. Sed imperdiet vehicula lectus. Maecenas ligula purus, suscipit quis fermentum ac, lacinia nec diam. Nullam purus est, elementum dignissim lectus ac, suscipit hendrerit nisl. Suspendisse ultricies lectus in leo porta consectetur. Vestibulum at dui in massa egestas vestibulum sit amet a lectus. Sed feugiat vel est at ultricies. Integer sed tempus felis. Duis mattis non ligula porttitor vehicula. Donec ac tortor vel dolor venenatis ullamcorper quis facilisis mi. Sed elementum convallis nisl, vitae rutrum leo fringilla at. Donec faucibus enim id laoreet condimentum. Aenean volutpat elit sapien, faucibus sollicitudin risus congue ac. Sed fermentum enim et auctor vulputate. Nunc vulputate neque ut posuere adipiscing.</p>
  </div>
</body>
</html>

## jsbin.mujup.js
$(document).ready(function(e){
                function getViewPort(){
                    var element = window;
                    var attribute = 'inner';
                    if(!('innerWidth' in element)){
                        attribute = 'client';
                        element = document.documentElement || document.body;
                    }
                    return {
                        width: element[ attribute + 'Width' ],
                        height: element[ attribute + 'Height' ]
                    };
                }

                function checkOffsets(){
                    var isiOffset = $('.content-isi').offset().top;
                    var isiHeight = $('.floating-isi').height();
                    var currentScrollValue =  $(window).scrollTop();
                    if(isiOffset < getViewPort().height + currentScrollValue - isiHeight){
                        $('.floating-isi').hide();
                    }else{
                        $('.floating-isi').show();
                    }
                }

                checkOffsets();

                $(window).on('scroll', function(e){checkOffsets();});


                $(window).resize(function(e){checkOffsets();});
            });
	html, body{
	height:150%;
	}

	.floating-isi {
	background: #85144B;
	position:fixed;
	bottom:0;
	height:30%;
	color:White;
	}

	.content-isi {
	background:#0074D9;
	color:White;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
	<meta charset="utf-8">
	<title>Floating ISI Example</title>
	</head>
	<body>
	<div class="content">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non felis dignissim, sagittis felis eu, tristique lectus. Integer condimentum tincidunt nisl. Sed imperdiet vehicula lectus. Maecenas ligula purus, suscipit quis fermentum ac, lacinia nec diam. Nullam purus est, elementum dignissim lectus ac, suscipit hendrerit nisl. Suspendisse ultricies lectus in leo porta consectetur. Vestibulum at dui in massa egestas vestibulum sit amet a lectus. Sed feugiat vel est at ultricies. Integer sed tempus felis. Duis mattis non ligula porttitor vehicula. Donec ac tortor vel dolor venenatis ullamcorper quis facilisis mi. Sed elementum convallis nisl, vitae rutrum leo fringilla at. Donec faucibus enim id laoreet condimentum. Aenean volutpat elit sapien, faucibus sollicitudin risus congue ac. Sed fermentum enim et auctor vulputate. Nunc vulputate neque ut posuere adipiscing.</p>
	<p>Mauris dignissim id lorem ac feugiat. Phasellus volutpat placerat dolor id sodales. Maecenas euismod enim et metus ultricies facilisis. Etiam non consequat mi. Nullam a dui consectetur, semper odio eget, lacinia mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dolor turpis, aliquam sed vulputate nec, faucibus nec risus. Quisque posuere enim id nunc dignissim placerat. Nulla consectetur massa risus, sed mattis nisi laoreet vitae.</p>
	</div>
	<div class="content-isi">
	<h3>ISI</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non felis dignissim, sagittis felis eu, tristique lectus. Integer condimentum tincidunt nisl. Sed imperdiet vehicula lectus. Maecenas ligula purus, suscipit quis fermentum ac, lacinia nec diam. Nullam purus est, elementum dignissim lectus ac, suscipit hendrerit nisl. Suspendisse ultricies lectus in leo porta consectetur. Vestibulum at dui in massa egestas vestibulum sit amet a lectus. Sed feugiat vel est at ultricies. Integer sed tempus felis. Duis mattis non ligula porttitor vehicula. Donec ac tortor vel dolor venenatis ullamcorper quis facilisis mi. Sed elementum convallis nisl, vitae rutrum leo fringilla at. Donec faucibus enim id laoreet condimentum. Aenean volutpat elit sapien, faucibus sollicitudin risus congue ac. Sed fermentum enim et auctor vulputate. Nunc vulputate neque ut posuere adipiscing.</p>
	</div>
	<div class="floating-isi">
	<h3>ISI</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non felis dignissim, sagittis felis eu, tristique lectus. Integer condimentum tincidunt nisl. Sed imperdiet vehicula lectus. Maecenas ligula purus, suscipit quis fermentum ac, lacinia nec diam. Nullam purus est, elementum dignissim lectus ac, suscipit hendrerit nisl. Suspendisse ultricies lectus in leo porta consectetur. Vestibulum at dui in massa egestas vestibulum sit amet a lectus. Sed feugiat vel est at ultricies. Integer sed tempus felis. Duis mattis non ligula porttitor vehicula. Donec ac tortor vel dolor venenatis ullamcorper quis facilisis mi. Sed elementum convallis nisl, vitae rutrum leo fringilla at. Donec faucibus enim id laoreet condimentum. Aenean volutpat elit sapien, faucibus sollicitudin risus congue ac. Sed fermentum enim et auctor vulputate. Nunc vulputate neque ut posuere adipiscing.</p>
	</div>
	</body>
	</html>
	$(document).ready(function(e){
	function getViewPort(){
	var element = window;
	var attribute = 'inner';
	if(!('innerWidth' in element)){
	attribute = 'client';
	element = document.documentElement \|\| document.body;
	}
	return {
	width: element[ attribute + 'Width' ],
	height: element[ attribute + 'Height' ]
	};
	}

	function checkOffsets(){
	var isiOffset = $('.content-isi').offset().top;
	var isiHeight = $('.floating-isi').height();
	var currentScrollValue = $(window).scrollTop();
	if(isiOffset < getViewPort().height + currentScrollValue - isiHeight){
	$('.floating-isi').hide();
	}else{
	$('.floating-isi').show();
	}
	}

	checkOffsets();

	$(window).on('scroll', function(e){checkOffsets();});


	$(window).resize(function(e){checkOffsets();});
	});