Блог

Главная - Вопросы по программированию - Не могу понять, почему Waypoints sticky не работает

Не могу понять, почему Waypoints sticky не работает

#css #sticky

#css #sticky

Вопрос:

Я пытался использовать функцию waypoints sticky, но она просто отказывается работать. То же самое с другими функциями waypoint, например, когда определенный элемент попадает в верхнюю часть окна просмотра. Никаких действий вообще нет!
Вот мой код для функции sticky. Первый абзац должен «прилипать» поверх окна просмотра, а остальные должны прокручиваться естественным образом:

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

СКРИПКА: http://jsfiddle.net/4SYdB/1 /

Ответ №1:

Прежде всего включите сценарий быстрого доступа; подробнее читайте здесь.. Проверьте ДЕМО.

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

Если все еще не работает, попробуйте добавить класс .stuck . Добавляет класс к элементу sticky, когда пользователь достигает его. По умолчанию, когда элемент достигает верхней части окна просмотра, он получает класс sticked.

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

Ответ №2:

Хорошо, удалось перепроектировать пример кода, представленный на их сайте. Проблема заключалась в добавлении #introCap1.stuck определения в css следующим образом:

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