Javascript/Jquery Super Scrollorama 导航问题

Question

在我目前正在开发的 WordPress 网站上，我的客户希望首页的不同部分从底部向上滑动并覆盖上一个部分，就像删除或滑动过渡一样。使用此处找到的 super 滚动拉马:http://johnpolacek.github.com/superscrollorama/ ，我设法达到了预期的结果。

接下来，我只需要在首页上创建一个导航菜单。我这样做了，并在页面上的各个不同点设置了 anchor 。当我单击导航菜单链接时，我还使用了scrollTo库来滚动动画。但是，我遇到了一些问题:

• 当我在顶部点击“展示”时，它会将我带到展示部分，但产品部分(紧随其后的 div)与它重叠。
• 其他div似乎也有同样的问题，即以下div与当前div重叠
• 我只能向前导航。当我尝试向后走时，它不会(“家”除外)
• 我认为这可能与div的CSS“top”属性有关，所以我尝试在每次点击功能启动时重置它们，但它不起作用。所以我暂时把它删除了。
• 当前设置 JavaScript 以防止滚动到 anchor 的默认操作，而是将其设置为滚动到实际的 div 本身。但是，我仍然遇到同样的问题。

编辑:我解决了上述所有问题，但现在出现了一个新问题。如果您滚动浏览该网站，然后调整浏览器窗口的大小并向上滚动，您会注意到底部的一点被切断。我查看了 superscrollorama 页面，它也有同样的问题。我希望有人知道如何解决这个问题。

这是我当前正在处理的网站:http://breathe.simalam.ca/

这是用于滚动的 javascript:

$(document).ready(function() {
jQuery('.home-link').click(function(e){
    e.preventDefault();
    jQuery(window).scrollTo(0, 1000, {queue:true});
});
jQuery('.showcase-link').click(function(e){
    e.preventDefault();
    jQuery(window).scrollTo('#showcase_content', 1000, {queue:true});
});
jQuery('.products-link').click(function(e){
    e.preventDefault();
    jQuery(window).scrollTo('#products_content', 1000, {queue:true});

});
jQuery('.about-link').click(function(e){
    e.preventDefault();
    jQuery(window).scrollTo('#about_content', 1000, {queue:true});

});
jQuery('.locator-link').click(function(e){
    e.preventDefault();
    jQuery(window).scrollTo('#locator_content', 1000, {queue:true});

});
jQuery('.contact-link').click(function(e){
    e.preventDefault();
    jQuery(window).scrollTo('#contact_content', 1000, {queue:true});

}); });

滚动代码:

$(document).ready(function() {
    $('#wrapper').css('display','block');
    var controller = $.superscrollorama();
    var pinDur = 4000;  /* set duration of pin scroll in pixels */

    // create animation timeline for pinned element
    var pinAnimations = new TimelineLite();
    pinAnimations
    .append([
        TweenMax.to($('#showcase'), .5, {css:{top:0}})
    ], .5)
    .append([
        TweenMax.to($('#products'), .5, {css:{top:0}})
    ], .5)
    .append([
        TweenMax.to($('#about'), .5, {css:{top:0}})
    ], .5)
    .append([
        TweenMax.to($('#locator'), .5, {css:{top:0}})
    ], .5)
    .append([
        TweenMax.to($('#contact'), .5, {css:{top:0}})
    ], .5)
    .append(TweenMax.to($('#pin-frame-unpin'), .5, {css:{top:'100px'}}));


    controller.pin($('#examples-pin'), pinDur, {
        anim:pinAnimations, 
        onPin: function() {
            $('#examples-pin').css('height','100%');
        }, 
        onUnpin: function() {
            $('#examples-pin').css('height','2000px');
        }
    }); });

所有节 div 都位于父 div 内。部分 div 的高度、宽度和顶部均为 100%。

包含所有这些部分 div 的父 div 如下:

#examples-pin { 
 position: relative; /* relative positioning for transitions to work? */
 width: 101%; /* max width */
 height: 2000px; /* height of 2000px for now */
 overflow: hidden; /* hide the overflow for transitions to work */
 margin-bottom: -200px; /* negative bottom margin */
}

Answer 1

总而言之，pushFollowers: false 对于所有 pin 并通过 div 手动间隔并在固定元素之后进行填充是解决方案。

这个问题似乎将在下一版本的 superscrollorama 中得到解决。我会看看 https://github.com/johnpolacek/superscrollorama/issues第 94 期他们发布了新版本的演示代码。