TinyPoro/gist:02ba04b35dc83f3bd40e02b4c017a406

## gistfile1.txt
## html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="wraper">
  <div class="main h2000 bg-green">
    Phần chính trang web
    <br/> Phần chính trang web
    <br/> Phần chính trang web
    <br/> Phần chính trang web
    <br/> Phần chính trang web
    <br/>
  </div>
  <div class="right-side-bar">
    <div class="adv h100 bg-blue">
      Nội dung gì đó
    </div>
    <div class="adv h500 bg-yellow ">
      <div class="abv-img bg-red " id="almost-show">
        Khối này nên được áp dụng plugin để hiển thị khi div cha còn hiển thị
      </div>
    </div>
        <div class="adv h500 bg-yellow ">
      <div class="abv-img bg-red " id="almost-show2">
        Khối này nên được áp dụng plugin để hiển thị khi div cha còn hiển thị
      </div>
    </div>
    	<div class="adv h100 bg-blue" id="almost-blue">
      Khi kéo lên, khối cha dần ẩn đi thì khối con cũng bị kéo theo
        </div>
  </div>
</div>
</body>
</html>

## css
/* Layout styles */

.wraper {
  width: 100%;
  color: #fff;
  font-family: tahoma;
  font-size: 12px;
}

.main {
  width: 80%;
  float: left;
}

.right-side-bar {
  width: 20%;
  float: left;
}

.abv-img {
  height: 100px;
}


/* Unities styles */

.bg-blue {
  background-color: blue;
}

.bg-green {
  background-color: green;
}

.bg-yellow {
  background-color: yellow;
}

.bg-red {
  background-color: red;
}

.h100 {
  height: 100px;
}

.h200 {
  height: 200px;
}

.h500 {
  height: 500px;
}

.h1000 {
  height: 1000px;
}

.h2000 {
  height: 2000px;
}


/* Your plugin style here */


## js
$.fn.inner_float = function(obj) {
	var child_id = $(this).attr("id");
	var parent_height = parseInt($(this).parent().height());
	var child_height = parseInt($(this).height());
	var parent_top = parseInt($(this).parent().offset().top);

  var top = parseInt(obj.top);
  var margin_top = parseInt(obj.margin_top);
  var margin_bottom = parseInt(obj.margin_bottom);

 	init();

  var target_one = parent_top + margin_top - top;
  var target_two = parent_top + parent_height - margin_bottom - child_height - top;

  $(window).bind( "scroll", function() {
    scroll();
  });


  function init(){
  		$("#"+child_id).parent().css("position","relative");

      $("#"+child_id).css("position","absolute").css("bottom","").css("top",margin_top);
  }

	function scroll() {
		var scrollTop=document.documentElement.scrollTop;

    if( scrollTop <= target_one ){
    		$("#"+child_id).css("position","absolute").css("bottom","").css("top",margin_top);
    }else if( scrollTop <= target_two ){
    		var parent_width = parseInt($("#"+child_id).parent().width());
    				$("#"+child_id).css("position","fixed").css("bottom","").css("top",top).css('width', parent_width);
    } else{
    $("#"+child_id).css("position","absolute").css("bottom",margin_bottom).css("top","");
    }
	}
}
// scrollTop >= parent_height-1.00001*margintop
/* Call your plugin */
$(document).ready(function(){
	    $('#almost-show').inner_float({
	    	top:"100px",
	    	margin_top:"10px",
	    	margin_bottom:"50px"
	});
  $('#almost-show2').inner_float({
          top:"100px",
          margin_top:"10px",
          margin_bottom:"50px"
    });
});
	## html
	<!DOCTYPE html>
	<html>
	<head>
	</head>
	<body>
	<div class="wraper">
	<div class="main h2000 bg-green">
	Phần chính trang web
	<br/> Phần chính trang web
	<br/> Phần chính trang web
	<br/> Phần chính trang web
	<br/> Phần chính trang web
	<br/>
	</div>
	<div class="right-side-bar">
	<div class="adv h100 bg-blue">
	Nội dung gì đó
	</div>
	<div class="adv h500 bg-yellow ">
	<div class="abv-img bg-red " id="almost-show">
	Khối này nên được áp dụng plugin để hiển thị khi div cha còn hiển thị
	</div>
	</div>
	<div class="adv h500 bg-yellow ">
	<div class="abv-img bg-red " id="almost-show2">
	Khối này nên được áp dụng plugin để hiển thị khi div cha còn hiển thị
	</div>
	</div>
	<div class="adv h100 bg-blue" id="almost-blue">
	Khi kéo lên, khối cha dần ẩn đi thì khối con cũng bị kéo theo
	</div>
	</div>
	</div>
	</body>
	</html>

	## css
	/* Layout styles */

	.wraper {
	width: 100%;
	color: #fff;
	font-family: tahoma;
	font-size: 12px;
	}

	.main {
	width: 80%;
	float: left;
	}

	.right-side-bar {
	width: 20%;
	float: left;
	}

	.abv-img {
	height: 100px;
	}


	/* Unities styles */

	.bg-blue {
	background-color: blue;
	}

	.bg-green {
	background-color: green;
	}

	.bg-yellow {
	background-color: yellow;
	}

	.bg-red {
	background-color: red;
	}

	.h100 {
	height: 100px;
	}

	.h200 {
	height: 200px;
	}

	.h500 {
	height: 500px;
	}

	.h1000 {
	height: 1000px;
	}

	.h2000 {
	height: 2000px;
	}


	/* Your plugin style here */


	## js
	$.fn.inner_float = function(obj) {
	var child_id = $(this).attr("id");
	var parent_height = parseInt($(this).parent().height());
	var child_height = parseInt($(this).height());
	var parent_top = parseInt($(this).parent().offset().top);

	var top = parseInt(obj.top);
	var margin_top = parseInt(obj.margin_top);
	var margin_bottom = parseInt(obj.margin_bottom);

	init();

	var target_one = parent_top + margin_top - top;
	var target_two = parent_top + parent_height - margin_bottom - child_height - top;

	$(window).bind( "scroll", function() {
	scroll();
	});


	function init(){
	$("#"+child_id).parent().css("position","relative");

	$("#"+child_id).css("position","absolute").css("bottom","").css("top",margin_top);
	}

	function scroll() {
	var scrollTop=document.documentElement.scrollTop;

	if( scrollTop <= target_one ){
	$("#"+child_id).css("position","absolute").css("bottom","").css("top",margin_top);
	}else if( scrollTop <= target_two ){
	var parent_width = parseInt($("#"+child_id).parent().width());
	$("#"+child_id).css("position","fixed").css("bottom","").css("top",top).css('width', parent_width);
	} else{
	$("#"+child_id).css("position","absolute").css("bottom",margin_bottom).css("top","");
	}
	}
	}
	// scrollTop >= parent_height-1.00001*margintop
	/* Call your plugin */
	$(document).ready(function(){
	$('#almost-show').inner_float({
	top:"100px",
	margin_top:"10px",
	margin_bottom:"50px"
	});
	$('#almost-show2').inner_float({
	top:"100px",
	margin_top:"10px",
	margin_bottom:"50px"
	});
	});