Created
November 14, 2018 08:36
-
-
Save TinyPoro/02ba04b35dc83f3bd40e02b4c017a406 to your computer and use it in GitHub Desktop.
Jquery_plugin_scroll
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
## 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" | |
}); | |
}); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment