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

基本上我只是複製了附帶菜單的演示文件。我添加了選項腳本部分，啓用了菜單。我確信所有的名字都是它們應該是的，並且創造了一些脣，所以有實際的空間可以滾動到。

我的第一個注意事項是演示表示菜單應該轉到'/ 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); 
});

對於爲什麼需要$(document).ready();包裝見here。

來源

2013-11-26 10:29:59 Nunners

並沒有解決全部問題，但這個確實幫助，感謝您的解釋太:) – Jane

您可能還需要包裝的第二部分你的腳本也在包裝中。（即身體標記末尾的腳本） – Nunners

包裝第二部分無助於感謝您的建議。 – Jane

jQuery的panelSnap無法得到它的工作

回答

相關問題