JQuery panelSnap не может заставить его работать

Я пытаюсь реализовать JQuery panelSnap на моем сайте, но я даже не могу получить демонстрационную работу ...JQuery panelSnap не может заставить его работать

Очевидно, что я делаю что-то неправильно, я попытался пустячный немного, но это мне не помогло.

Это мой HTML:

<html> 
    <head> 
    <script src="assets/js/jquery.js"></script> 
    <script src="assets/js/jquery.panelSnap.js"></script> 
    <script> 
     var options = { 
     $menu: $('header .menu') 
     }; 

     $('.panel_container').panelSnap(options); 
    </script> 

    <style> 
     section { 
      margin-bottom:800px; 
     } 
    </style> 
    </head> 
    <body> 
    <header> 
     <div class="menu"> 
     <a href="#first" data-panel="first">First</a> 
     <a href="#second" data-panel="second">Second</a> 
     <a href="#third" data-panel="third">Third</a> 
     </div> 
    </header> 
    <div class="panel_container"> 
     <section data-panel="first"><h1>test</h1><br><br> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce feugiat erat at rhoncus porta. Vestibulum fringilla viverra laoreet. Ut vel nunc adipiscing, consequat mauris eget, aliquet leo. Nunc viverra posuere elit, ut hendrerit massa dignissim vitae. Ut euismod quam ut sapien sagittis, ac euismod libero rutrum. Sed at justo felis. Proin condimentum tortor a erat laoreet, quis adipiscing velit elementum. Pellentesque egestas sem a ante aliquet, in semper eros venenatis. Mauris faucibus orci bibendum libero aliquam rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc fermentum dolor vel nisi rhoncus, ultrices tincidunt nisi vehicula. Nulla eros nibh, interdum quis tellus nec, convallis ullamcorper sapien. Pellentesque adipiscing gravida suscipit. 

Proin vitae nisi quis lectus tristique auctor. Nam tristique sapien sit amet odio faucibus adipiscing. Sed lacinia tortor in mollis auctor. Proin sit amet est ante. Sed fermentum arcu ut arcu ultricies, quis luctus odio vehicula. Duis tincidunt elementum lacus quis cursus. Integer porta sit amet purus et viverra. Nulla quis sollicitudin urna. Pellentesque et nunc semper, dapibus massa ac, scelerisque ipsum. In tempus massa et tortor mattis, sit amet laoreet neque accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod non massa at sagittis. 

Vestibulum pulvinar purus odio. Vestibulum non iaculis metus. Maecenas at aliquam leo, eu commodo dui. In id ullamcorper metus, in convallis massa. Donec a ante nec risus vehicula suscipit sit amet a dui. Etiam quam enim, posuere et tempor vitae, accumsan vel risus. Vivamus a arcu tortor. Morbi auctor placerat massa convallis sagittis. Vivamus accumsan vulputate rhoncus. Phasellus mattis orci non luctus interdum. Praesent eu feugiat mi. Phasellus vitae elementum nunc. Aliquam luctus aliquam tellus, quis commodo ipsum molestie vel. Cras ut dignissim erat. 

Aenean luctus porta enim eu feugiat. Mauris quis tristique massa, id commodo risus. Morbi consectetur, magna nec molestie tincidunt, libero nunc volutpat nulla, quis feugiat metus leo quis enim. Proin varius, turpis id rhoncus mattis, dui magna fringilla nisi, nec blandit nisl arcu ac tortor. Proin est nisi, tempor sit amet porta ac, cursus sit amet est. Praesent suscipit, nibh non malesuada aliquet, dui turpis sagittis magna, nec facilisis metus magna ut turpis. Fusce sit amet massa at mi euismod elementum sit amet id massa. Duis nec magna vitae arcu consequat tempus. Etiam non pellentesque libero. Cras aliquet convallis adipiscing. Aliquam dictum viverra sem nec tempus. Nulla odio justo, ornare ut velit vel, commodo venenatis libero. Curabitur in tincidunt elit. Ut ac luctus risus, quis interdum neque. Sed quis nulla id erat gravida pretium sit amet eget odio. 

Curabitur egestas a mi eget sollicitudin. Ut interdum dictum augue lobortis consequat. Aliquam congue pharetra rhoncus. Ut nec tortor eget nunc vestibulum venenatis id quis nibh. Nullam at dui consequat, aliquet odio porttitor, convallis sapien. In bibendum ipsum non elementum euismod. Maecenas eu justo a diam mollis placerat ac sit amet mauris. Phasellus id aliquam ligula, et tristique est. Etiam at arcu pretium, accumsan odio eu, vestibulum tellus. Etiam dapibus laoreet volutpat. Sed et urna ipsum. Nulla ultrices quam sem, eu eleifend purus iaculis a. Nunc sit amet congue mauris. 
     </section> 
     <section data-panel="second"><h1>test</h1><br><br> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce feugiat erat at rhoncus porta. Vestibulum fringilla viverra laoreet. Ut vel nunc adipiscing, consequat mauris eget, aliquet leo. Nunc viverra posuere elit, ut hendrerit massa dignissim vitae. Ut euismod quam ut sapien sagittis, ac euismod libero rutrum. Sed at justo felis. Proin condimentum tortor a erat laoreet, quis adipiscing velit elementum. Pellentesque egestas sem a ante aliquet, in semper eros venenatis. Mauris faucibus orci bibendum libero aliquam rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc fermentum dolor vel nisi rhoncus, ultrices tincidunt nisi vehicula. Nulla eros nibh, interdum quis tellus nec, convallis ullamcorper sapien. Pellentesque adipiscing gravida suscipit. 

Proin vitae nisi quis lectus tristique auctor. Nam tristique sapien sit amet odio faucibus adipiscing. Sed lacinia tortor in mollis auctor. Proin sit amet est ante. Sed fermentum arcu ut arcu ultricies, quis luctus odio vehicula. Duis tincidunt elementum lacus quis cursus. Integer porta sit amet purus et viverra. Nulla quis sollicitudin urna. Pellentesque et nunc semper, dapibus massa ac, scelerisque ipsum. In tempus massa et tortor mattis, sit amet laoreet neque accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod non massa at sagittis. 

Vestibulum pulvinar purus odio. Vestibulum non iaculis metus. Maecenas at aliquam leo, eu commodo dui. In id ullamcorper metus, in convallis massa. Donec a ante nec risus vehicula suscipit sit amet a dui. Etiam quam enim, posuere et tempor vitae, accumsan vel risus. Vivamus a arcu tortor. Morbi auctor placerat massa convallis sagittis. Vivamus accumsan vulputate rhoncus. Phasellus mattis orci non luctus interdum. Praesent eu feugiat mi. Phasellus vitae elementum nunc. Aliquam luctus aliquam tellus, quis commodo ipsum molestie vel. Cras ut dignissim erat. 

Aenean luctus porta enim eu feugiat. Mauris quis tristique massa, id commodo risus. Morbi consectetur, magna nec molestie tincidunt, libero nunc volutpat nulla, quis feugiat metus leo quis enim. Proin varius, turpis id rhoncus mattis, dui magna fringilla nisi, nec blandit nisl arcu ac tortor. Proin est nisi, tempor sit amet porta ac, cursus sit amet est. Praesent suscipit, nibh non malesuada aliquet, dui turpis sagittis magna, nec facilisis metus magna ut turpis. Fusce sit amet massa at mi euismod elementum sit amet id massa. Duis nec magna vitae arcu consequat tempus. Etiam non pellentesque libero. Cras aliquet convallis adipiscing. Aliquam dictum viverra sem nec tempus. Nulla odio justo, ornare ut velit vel, commodo venenatis libero. Curabitur in tincidunt elit. Ut ac luctus risus, quis interdum neque. Sed quis nulla id erat gravida pretium sit amet eget odio. 

Curabitur egestas a mi eget sollicitudin. Ut interdum dictum augue lobortis consequat. Aliquam congue pharetra rhoncus. Ut nec tortor eget nunc vestibulum venenatis id quis nibh. Nullam at dui consequat, aliquet odio porttitor, convallis sapien. In bibendum ipsum non elementum euismod. Maecenas eu justo a diam mollis placerat ac sit amet mauris. Phasellus id aliquam ligula, et tristique est. Etiam at arcu pretium, accumsan odio eu, vestibulum tellus. Etiam dapibus laoreet volutpat. Sed et urna ipsum. Nulla ultrices quam sem, eu eleifend purus iaculis a. Nunc sit amet congue mauris. 

Sed euismod est urna. Aliquam lacinia nulla et mi tempus porta. Aliquam varius, nulla nec vestibulum lobortis, urna ligula gravida est, non sollicitudin lorem dolor ac enim. Vivamus non porta velit. Aenean ut bibendum nunc. Sed non lectus dapibus, mattis nisl condimentum, placerat nibh. Nulla tempus molestie laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet magna id erat auctor vulputate non non odio. Morbi at ipsum condimentum, commodo velit tincidunt, iaculis est. In ultrices, quam hendrerit luctus suscipit, urna odio ornare risus, sed laoreet odio libero vitae ipsum. In quis venenatis lacus. Mauris elementum risus eget justo cursus viverra. 
     </section> 
     <section data-panel="third"><h1>test</h1><br><br> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce feugiat erat at rhoncus porta. Vestibulum fringilla viverra laoreet. Ut vel nunc adipiscing, consequat mauris eget, aliquet leo. Nunc viverra posuere elit, ut hendrerit massa dignissim vitae. Ut euismod quam ut sapien sagittis, ac euismod libero rutrum. Sed at justo felis. Proin condimentum tortor a erat laoreet, quis adipiscing velit elementum. Pellentesque egestas sem a ante aliquet, in semper eros venenatis. Mauris faucibus orci bibendum libero aliquam rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc fermentum dolor vel nisi rhoncus, ultrices tincidunt nisi vehicula. Nulla eros nibh, interdum quis tellus nec, convallis ullamcorper sapien. Pellentesque adipiscing gravida suscipit. 

Proin vitae nisi quis lectus tristique auctor. Nam tristique sapien sit amet odio faucibus adipiscing. Sed lacinia tortor in mollis auctor. Proin sit amet est ante. Sed fermentum arcu ut arcu ultricies, quis luctus odio vehicula. Duis tincidunt elementum lacus quis cursus. Integer porta sit amet purus et viverra. Nulla quis sollicitudin urna. Pellentesque et nunc semper, dapibus massa ac, scelerisque ipsum. In tempus massa et tortor mattis, sit amet laoreet neque accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod non massa at sagittis. 

Vestibulum pulvinar purus odio. Vestibulum non iaculis metus. Maecenas at aliquam leo, eu commodo dui. In id ullamcorper metus, in convallis massa. Donec a ante nec risus vehicula suscipit sit amet a dui. Etiam quam enim, posuere et tempor vitae, accumsan vel risus. Vivamus a arcu tortor. Morbi auctor placerat massa convallis sagittis. Vivamus accumsan vulputate rhoncus. Phasellus mattis orci non luctus interdum. Praesent eu feugiat mi. Phasellus vitae elementum nunc. Aliquam luctus aliquam tellus, quis commodo ipsum molestie vel. Cras ut dignissim erat. 

Aenean luctus porta enim eu feugiat. Mauris quis tristique massa, id commodo risus. Morbi consectetur, magna nec molestie tincidunt, libero nunc volutpat nulla, quis feugiat metus leo quis enim. Proin varius, turpis id rhoncus mattis, dui magna fringilla nisi, nec blandit nisl arcu ac tortor. Proin est nisi, tempor sit amet porta ac, cursus sit amet est. Praesent suscipit, nibh non malesuada aliquet, dui turpis sagittis magna, nec facilisis metus magna ut turpis. Fusce sit amet massa at mi euismod elementum sit amet id massa. Duis nec magna vitae arcu consequat tempus. Etiam non pellentesque libero. Cras aliquet convallis adipiscing. Aliquam dictum viverra sem nec tempus. Nulla odio justo, ornare ut velit vel, commodo venenatis libero. Curabitur in tincidunt elit. Ut ac luctus risus, quis interdum neque. Sed quis nulla id erat gravida pretium sit amet eget odio. 

Curabitur egestas a mi eget sollicitudin. Ut interdum dictum augue lobortis consequat. Aliquam congue pharetra rhoncus. Ut nec tortor eget nunc vestibulum venenatis id quis nibh. Nullam at dui consequat, aliquet odio porttitor, convallis sapien. In bibendum ipsum non elementum euismod. Maecenas eu justo a diam mollis placerat ac sit amet mauris. Phasellus id aliquam ligula, et tristique est. Etiam at arcu pretium, accumsan odio eu, vestibulum tellus. Etiam dapibus laoreet volutpat. Sed et urna ipsum. Nulla ultrices quam sem, eu eleifend purus iaculis a. Nunc sit amet congue mauris. 

     </section> 
    </div> 
    <script> 
    var options = { 
    $menu: true, 
    menuSelector: 'a', 
    panelSelector: 'section', 
    namespace: '.panelSnap', 
    onSnapStart: function(){}, 
    onSnapFinish: function(){}, 
    directionThreshold: 20, 
    slideSpeed: 200 
    }; 

    $('.panel_container').panelSnap(options); 
</script> 
    </body>

В JS находится здесь; https://github.com/guidobouman/jquery-panelsnap/blob/master/jquery.panelSnap.js

В основном я просто скопировал демонстрационный файл с приложенным меню. Я добавил часть скрипта options, включил меню. Я удостоверился, что все имена являются тем, кем они должны быть, и создали некоторые губы, поэтому есть реальная комната для прокрутки.

Мое первое замечание заключалось в том, что демонстрация говорит о том, что меню должно перейти в '/ first', я изменил это на «# first», потому что/не указывает точку привязки.

Так что, за исключением этого момента, я не могу найти, что не так с моим кодом, я надеюсь, что кто-то может дать мне толчок в правильном направлении.

источник

2013-11-26 Jane

Прежде всего, выньте дополнительный скриптовый тег, который у вас есть внизу, и поместите его в его место. Затем установите стиль контейнера панели position: absolute и overflow: scroll.

Этого должно быть достаточно, чтобы заставить его работать. Однако, в зависимости от размера экрана, он может не работать, потому что высота каждой панели указана в пикселях. Изменение контейнера панели и высота секции до 100% работали намного лучше для меня. Вот working fiddle, и вот что мой CSS выглядел как после этих изменений:

.panel_container { 
    position: absolute; 
    overflow: scroll; 
    height: 100%; 
} 

section { 
    height: 100%; 
}

источник

2013-12-19 16:17:05 ringstaff

Попробуйте изменить свой скрипт:

var options = { 
    $menu: $('header .menu') 
    }; 

    $('.panel_container').panelSnap(options);

Чтобы быть:

$(document).ready(function() { 
     var options = { 
     $menu: $('header .menu') 
     }; 

     $('.panel_container').panelSnap(options); 
});

См here почему требуется $(document).ready(); обертка.

источник

2013-11-26 10:29:59 Nunners

Не решить всю проблему, но это, безусловно, помогло, спасибо за объяснения тоже :) – Jane

Вам также может понадобиться, чтобы обернуть вторую часть ваш скрипт в оболочке также. (т. е. сценарий в конце тега тела) – Nunners

Обертка второй части не помогла, но поблагодарила вас за предложение. – Jane

JQuery panelSnap не может заставить его работать

ответ

Смежные вопросы