dynamic element positioning
I have been seeing this thing for months and years and i really wanna know how to do that one.
For example, there is an element in the middle of the page. and it is in absolute position. When scroll downs and comes to that element, it becomes fixed positioned 开发者_如何学Cand follows the scroll, when scroll up and back to middle of the page it becomes absolute again.
I can give google adwords accounts page as an example, in the campaigns page, your keywords' header is the same thing.
how to do that one ?
thanks
Something like this (tested on Chrome) will work:
<html>
<head>
<title>Example</title>
<style>
.banner {position: absolute; top: 40px; left: 50px; background-color:cyan}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" />
<script type="text/javascript" >
$(function() {
$(window).scroll(function() {
var top = $(window).scrollTop();
if (top < 40) top= 40;
$('.banner').css({top: top})
})
})
</script>
</head>
<body>
<div class="banner">This is the banner</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/><br/><br/> Cras rhoncus euismod sagittis.<br/><br/><br/> Fusce tincidunt consectetur ante eu commodo.<br/><br/><br/> Fusce lacinia consectetur nulla sit amet mattis.<br/><br/><br/> In viverra bibendum nibh vitae pharetra.<br/><br/><br/> Nam non eros semper ipsum facilisis fringilla.<br/><br/><br/> Phasellus sit amet purus interdum arcu hendrerit sagittis.<br/><br/><br/> Sed fermentum, orci non tincidunt pellentesque, tellus ipsum ultrices dui, at venenatis mi turpis non odio.<br/><br/><br/> Etiam elementum massa eu libero molestie nec pulvinar lacus suscipit.<br/><br/><br/> Etiam erat massa, mattis et sollicitudin eu, posuere commodo ligula.<br/><br/><br/> Vestibulum nec sem arcu.<br/><br/><br/> Vestibulum justo risus, feugiat at tristique a, sagittis vel dui.<br/><br/><br/> Sed enim erat, scelerisque sit amet accumsan scelerisque, vestibulum vitae dui.<br/><br/><br/> Integer et orci enim.<br/><br/><br/> Aliquam est mauris, consequat sed egestas vitae, scelerisque non sapien.<br/><br/><br/> Nam feugiat diam eu elit dignissim commodo.<br/><br/><br/> Curabitur eleifend lacus a leo vehicula rhoncus.<br/><br/><br/> Fusce luctus antequis urna sodales vestibulum.<br/><br/><br/> Aliquam tempus nisl vitae arcu bibendum sollicitudin.<br/><br/><br/>
</body>
Edit: positioning the element 40 px under the title, but making it visible if the user scrolls down
you can do this with any element by applying the css:
#keepmefixed{
position:fixed;
}
however be aware that IE's support of this is missing, and it doesn't seem to work in Safari on the iPad (from my testing). You'll need to hook in some JavaScript to get it to work in these browsers.
加载中,请稍侯......
精彩评论