[英]jQuery parallax navigation doesn't scroll to target
我已經組裝了一個視差滾動演示,但我在導入內容之間遇到問題。
Header
和Footer
是固定的,其余的都沒有。
在變量section3Top
section4Top
我猜高度沒有正確計算。
我看不出這個問題。
請查看我的演示並嘗試單擊菜單。 它應該通過單擊菜單,滾動和調整大小來工作。
演示: http : //fiddle.jshell.net/Zza7t/
JS:
function redrawDotNav(){
var section1Top = 0;
var section2Top = $('#BuyKeep').offset().top - (($('#Rentals').offset().top - $('#BuyKeep').offset().top) / 2);
var section3Top = $('#Rentals').offset().top - (($('#WaystoWatch').offset().top - $('#Rentals').offset().top) / 2);
var section4Top = $('#WaystoWatch').offset().top - (($(document).height() - $('#WaystoWatch').offset().top) / 2);
$('nav#primary a').removeClass('active');
if($(document).scrollTop() >= section1Top && $(document).scrollTop() < section2Top){
$('nav#primary a.about').addClass('active');
} else if ($(document).scrollTop() >= section2Top && $(document).scrollTop() < section3Top){
$('nav#primary a.BuyKeep').addClass('active');
} else if ($(document).scrollTop() >= section3Top && $(document).scrollTop() < section4Top){
$('nav#primary a.Rentals').addClass('active');
} else if ($(document).scrollTop() >= section4Top){
$('nav#primary a.WaystoWatch').addClass('active');
}
}
function scrollFooter(scrollY, heightFooter) {
if(scrollY >= heightFooter) {
$('#WaystoWatch').css({
'bottom' : '0px'
});
}
else {
$('#WaystoWatch').css({
'bottom' : '-' + heightFooter + 'px'
});
}
}
function heightsCalculator(){
var windowHeight = $(window).height(),
footerHeight = $('#WaystoWatch').height(),
heightDocument = (windowHeight) + ($('#BuyKeep').height()) + ($('#Rentals').height()) + ($('#WaystoWatch').height()) - 0;
$('#scroll-animate, #scroll-animate-main').css({
'height' : heightDocument + 'px'
});
$('#about').css({
'height' : windowHeight + 'px'
});
$('.wrapper-parallax').css({
'margin-top' : windowHeight + 'px'
});
scrollFooter(window.scrollY, footerHeight);
window.onscroll = function(){
var scroll = window.scrollY;
$('#scroll-animate-main').css({
'top' : '-' + scroll + 'px'
});
$('#about').css({
'background-position-y' : 50 - (scroll * 100 / heightDocument) + '%'
});
scrollFooter(scroll, footerHeight);
}
}
唯一對我不起作用的鏈接是“頁腳”。因為你將它固定在位置,當你在頁面上下滾動時它會改變它的偏移量。 您希望對標題執行相同的操作並滾動頁面的特定位置,在本例中為底部。 還有一些東西會重新調整你的“頁腳”高度,我無法確定你在做什么或為什么這樣做,但我認為沒有必要。
$('a.WaystoWatch').click(function(){
$('html, body').animate({
scrollTop:$('body').height()
}, 1000, function() {
parallaxScroll();
});
return false;
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.