动态元素定位

时间:2010-06-14 10:53:51

标签: javascript css

我已经看了好几个月和几年了,我真的想知道怎么做。

例如,页面中间有一个元素。它处于绝对的位置。当向下滚动并进入该元素时,它将固定定位并跟随滚动,当向上滚动并返回到页面中间时,它再次变为绝对。

我可以将谷歌adwords帐户页面作为示例,在广告系列页面中,您的关键字标题是相同的。

怎么做那个?

谢谢

2 个答案:

答案 0 :(得分:3)

这样的东西(在Chrome上测试过)会起作用:

<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>

编辑:将元素定位在标题下40 px,但如果用户向下滚动则使其可见

答案 1 :(得分:-1)

您可以通过应用css:

对任何元素执行此操作
#keepmefixed{
  position:fixed;
}

然而请注意,IE对此的支持缺失,并且似乎在iPad上的Safari(从我的测试中)不起作用。您需要使用一些JavaScript来使其在这些浏览器中运行。