文章/答案/技术大牛

发布

社区首页 >问答首页 >动态元素定位

问动态元素定位
EN

Stack Overflow用户

提问于 2010-06-14 18:53:51

回答 2查看 1.4K关注 0票数 4

我已经看到这个东西好几个月和几年了，我真的很想知道怎么做。

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

我可以给google adwords帐户页面作为一个例子，在活动页面中，您的关键字的标题是相同的东西。

那该怎么做呢？

谢谢

javascript

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2010-06-17 01:01:05

像这样的东西(在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放置在标题下，但如果用户向下滚动，则使其可见

票数 3

Stack Overflow用户

发布于 2010-06-14 19:52:44

您可以通过应用css对任何元素执行此操作：

#keepmefixed{
  position:fixed;
}

然而，请注意IE对此的支持是缺失的，而且它似乎不能在iPad上的Safari中工作(根据我的测试)。您需要挂接一些JavaScript才能使其在这些浏览器中工作。

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/3036605

复制

相似问题

问动态元素定位
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动态元素定位EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动态元素定位
EN