jQuery视差导航不能滚动到目标

jQuery parallax navigation doesn't scroll to target

本文关键字：目标 滚动 不能 视差 导航 jQuery      更新时间：2023-09-26

我已经制作了一个视差滚动演示，但是我在内容之间导航时遇到了问题。

  • 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;
});
这里的

JSFIDDLE

相关文章：