gpt4 book ai didi

css - 无法弄清楚为什么 Waypoints sticky 不起作用

转载 作者:行者123 更新时间:2023-11-28 10:06:42 25 4
gpt4 key购买 nike

我试过使用航路点粘性功能,但它就是拒绝工作。与其他航路点功能相同,例如,当特定元素到达视口(viewport)顶部时。一点 Action 都没有!
这是我的粘性功能代码。第一段应该“粘”在视口(viewport)的顶部,其余的应该自然滚动:

<html>
<head>
<style type="text/css">
.introCap{
font-size: 10em;
}
</style>

</head>
<body>
<p id="introCap1"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
<p class="introCap"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
<p class="introCap"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
<p class="introCap"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
<p class="introCap"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="waypoints.min.js"></script>
<script src="waypoints-sticky.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$('#introCap1').waypoint('sticky');
});
</script>
</body>

</html>

FIDDLE:http://jsfiddle.net/4SYdB/1/

最佳答案

首先包括快捷脚本; read more here .. 检查 DEMO .

<script src="/path/to/waypoints-sticky.min.js"></script>
<script src="waypoints.min.js"></script>

如果仍然不行尝试添加一个类 .stuck 。当用户到达它时向粘性元素添加一个类。默认情况下,当元素到达视口(viewport)顶部时,它会获得卡住类。

在 HTML 中添加类 stuck

<p id="introCap1" class="stuck">Sticky Header </p>

CSS

.stuck{
position:fixed;
top:0;
left:0;
margin:0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
background: none repeat scroll 0 0 #6a6272;
color: #eae2f2;
}

关于css - 无法弄清楚为什么 Waypoints sticky 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24524278/

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