代码之家 › 专栏 › 技术社区 › Utku Dalmaz

动态元件定位

css javascript

Utku Dalmaz · 技术社区 · 16 年前

我已经看到这件事好几个月好几年了,我真的很想知道怎么做。

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

我可以举谷歌广告词账户页面为例,在活动页面,你的关键词的标题是一样的。

怎么做?

谢谢

2 回复 | 直到 15 年前

Iacopo 16 年前

像这样的东西(在铬上测试)可以工作:

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

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