function Up() { $(".head").each(function() { var el = $(this), offset = el.offset(), s = $(window).scrollTop(), f = $(".floating", this); if ((s > offset.top) && (s < offset.top + el.height())) { f.css({ "visibility": "visible" }); } else { f.css({ "visibility": "hidden" }); }; }); } $(function() { var clone; $(".head").each(function() { clone = $(".title", this); clone.before(clone.clone()).css("width", clone.width()).addClass("floating"); }); $(window).scroll(Up).trigger("scroll"); });
.floating { position: fixed; top: 0; visibility: hidden; } div{height:1500px;} h1,h2,h3{ padding:25px; } h1{background:#eee;} h2{background:#efc7de;} h3{background:#94b4bf;}
<div class="head"> <h1 class="title">Head01</h1> </div> <div class="head"> <h2 class="title">Head02</h2> </div> <div class="head"> <h3 class="title">Head03</h3> </div>