そのため、ページのどこにあるかに応じて、ページを上にスクロールするか下にスクロールする (onClick) スティッキー div を作成しようとしています。
私はしばらくの間コードを微調整してきましたが、魔法の公式を取得できません。
http://imakewebthings.com/jquery-waypoints/#get-startedおよびhttp://archive.plugins.jquery.com/project/ScrollToのプラグインを使用しています。
コードはこちらです。
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="http://s199881165.onlinehome.us/transfem/scripts/jquery.cookie.js"></script>
<script src="http://s199881165.onlinehome.us/transfem/scripts/jquery.scrollTo-1.4.3.1-min.js"></script>
<script src="http://s199881165.onlinehome.us/transfem/newlayout/script/waypoints.min.js"></script>
<script src="http://s199881165.onlinehome.us/transfem/newlayout/script/waypoints-sticky.min.js"></script>
</head>
...
<script>
$(function() { // When the page has loaded,
$('.tabbycat').waypoint( // create a waypoint
function() {
$('#tabtabtab').removeClass('tabbycat', 1, 'linear');
$('#tabtabtab').addClass('stuck', 1, 'linear');
}
)
});
$(function() { // When the page has loaded,
$('.top').waypoint( // create a waypoint
function() {
$('#tabtabtab').removeClass('stuck', 1, 'linear');
$('#tabtabtab').addClass('tabbycat', 1, 'linear');
}
)
});
var itsthis = document.getElementsByClassName('tabbycat');
var thistoo = document.getElementsByClassName('stuck');
$(itsthis).onClick(function(){
$(window).scrollTo( {top:'1px', left:'1px'}, 300 );
});
$(thistoo).onClick(function(){
$(window).scrollTo( {top:'339px', left:'1px'}, 300 );
});
</script>
タリーホー！