gpt4 book ai didi

javascript - 动态元素定位

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:22:35 25 4
gpt4 key购买 nike

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

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

我可以以google adwords accounts page为例,在campaigns page,你的keywords' header是一样的。

如何做到这一点?

谢谢

最佳答案

这样的东西(在 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 像素处,但在用户向下滚动时使其可见

关于javascript - 动态元素定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3036605/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com