我已经看了好几个月和几年了,我真的想知道怎么做。
例如,页面中间有一个元素。它处于绝对的位置。当向下滚动并进入该元素时,它将固定定位并跟随滚动,当向上滚动并返回到页面中间时,它再次变为绝对。
我可以将谷歌adwords帐户页面作为示例,在广告系列页面中,您的关键字标题是相同的。
怎么做那个?
谢谢
答案 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来使其在这些浏览器中运行。