所以我正在尝试创建一个粘性 div,它可以向上滚动页面或向下滚动页面(onClick),具体取决于它在页面上的位置。
我一直在调整代码一段时间,无法获得神奇的公式。
我使用的插件来自: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>
发现目标!