Question

我尝试过使用路标粘性功能，但它只是拒绝工作。同样具有其他航点特征，例如当特定元素击中视口的顶部时。完全没有动作！
这是我的粘性功能代码。第一段应该＆＃34;粘＆＃34;在视口顶部和休息时应自然滚动：

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

Answer 1

首先包括快捷方式脚本; read more here ..查看 DEMO 。

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

如果仍然无法工作尝试添加课程.stuck。当用户到达时，向粘性元素添加一个类。默认情况下，当元素到达视口的顶部时，它将获得卡住的类。

在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;
}

Answer 2

好的，设法对其网站上提供的示例代码进行逆向工程。问题是在css中添加#introCap1.stuck定义如下：

#introCap1.stuck{
    position:fixed; 
    top:0;
}

无法弄清楚为什么Waypoints粘不通

2 个答案: