Skip to content

Instantly share code, notes, and snippets.

@cbertelegni

cbertelegni/index.html

Created April 19, 2013 16:27
Show Gist options
  • Save cbertelegni/5421448 to your computer and use it in GitHub Desktop.
Save cbertelegni/5421448 to your computer and use it in GitHub Desktop.
Download ZIP
Mover div u otro obj html cuando el scroll que lo contiene pasa por encima.
Raw
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#cont { width: 600px;margin: 0 auto; background: orange; position: relative;}
#cont div{ height: 50px; width: 400px;margin: 20px auto; }
button { position: absolute; top: 50px; left: 50%}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="mover_con_scroll.min.js"></script>
<script type="text/javascript">
window.onload = ini;
function ini(){
mover_con_scroll($(window), $("button"), $("#cont"));
}
</script>
</head>
<body>
<div id="cont">
<button>Scrollea!!!</button>
<div style="background: #f00"></div>
<div style="background: #fff"></div>
<div style="background: #0f0"></div>
<div style="background: #00f"></div>
<div style="background: #0ff"></div>
<div style="background: #ff0"></div>
<div style="background: #f00"></div>
<div style="background: #fff"></div>
<div style="background: #0f0"></div>
<div style="background: #00f"></div>
<div style="background: #0ff"></div>
<div style="background: #ff0"></div>
<div style="background: #f00"></div>
<div style="background: #fff"></div>
<div style="background: #0f0"></div>
<div style="background: #00f"></div>
<div style="background: #0ff"></div>
<div style="background: #ff0"></div>
<div style="background: #f00"></div>
<div style="background: #fff"></div>
<div style="background: #0f0"></div>
<div style="background: #00f"></div>
<div style="background: #0ff"></div>
<div style="background: #ff0"></div>
<div style="background: #f00"></div>
<div style="background: #fff"></div>
<div style="background: #0f0"></div>
<div style="background: #00f"></div>
<div style="background: #0ff"></div>
<div style="background: #ff0"></div>
<div style="background: #f00"></div>
<div style="background: #fff"></div>
<div style="background: #0f0"></div>
<div style="background: #00f"></div>
<div style="background: #0ff"></div>
<div style="background: #ff0"></div>
<div style="background: #f00"></div>
<div style="background: #fff"></div>
<div style="background: #0f0"></div>
<div style="background: #00f"></div>
<div style="background: #0ff"></div>
<div style="background: #ff0"></div>
<div style="background: #f00"></div>
<div style="background: #fff"></div>
<div style="background: #0f0"></div>
<div style="background: #00f"></div>
<div style="background: #0ff"></div>
<div style="background: #ff0"></div>
<div style="background: #fff"></div>
<div style="background: #0f0"></div>
<div style="background: #00f"></div>
<div style="background: #0ff"></div>
<div style="background: #ff0"></div>
<div style="background: #f00"></div>
<div style="background: #fff"></div>
<div style="background: #0f0"></div>
<div style="background: #00f"></div>
<div style="background: #0ff"></div>
<div style="background: #ff0"></div>
</div>
</div>
<script type="text/javascript">if (!NREUMQ.f) { NREUMQ.f=function() {
NREUMQ.push(["load",new Date().getTime()]);
var e=document.createElement("script");
e.type="text/javascript";
e.src=(("http:"===document.location.protocol)?"http:":"https:") + "//" +
"d1ros97qkrwjf5.cloudfront.net/42/eum/rum.js";
document.body.appendChild(e);
if(NREUMQ.a)NREUMQ.a();
};
NREUMQ.a=window.onload;window.onload=NREUMQ.f;
};
NREUMQ.push(["nrfj","beacon-3.newrelic.com","5fea191aea","2478111","dVdXRUsJXllcERtQEl8XXlhKEh1HWBQ=",18,137,new Date().getTime(),"","","","",""]);</script></body>
</html>
Raw
mover_con_scroll.js
// @cbertelegni - web developer
// requiere JQuery
function mover_con_scroll(objScroll, objMover, relativeObj){
// objScroll : punterq JQ del obj que va a hacer scroll
// objMover : punterq JQ del obj que se va a mover scroll --> css: tiene que estar en position:absolute
// relativeObj : punterq JQ del obj que contiene al que se va a cover con el scroll
var self = this;
self.obj_top = objMover.offset().top - (relativeObj ? relativeObj.offset().top : 0);
self.obj_off = objMover.offset().top;
objScroll.scroll(function(e){
var o = {
condition : objScroll.scrollTop() >= self.obj_off,
top : objScroll.scrollTop() - self.obj_off + self.obj_top
};
if(o.condition){
objMover.css("top", o.top);
}
});
}
Raw
mover_con_scroll.min.js
// @cbertelegni - web developer
function mover_con_scroll(a,b,c){var d=this;d.obj_top=b.offset().top-(c?c.offset().top:0);d.obj_off=b.offset().top;a.scroll(function(e){var o={condition:a.scrollTop()>=d.obj_off,top:a.scrollTop()-d.obj_off+d.obj_top};if(o.condition){b.css("top",o.top)}})}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment