Skrollr相对于顶部底部在chrome中较早着火

Question

我有几个相对位置的div堆叠在彼此的顶部，高度为100%设置jQuery加载。在每个相对位置的div中都有一个固定的div，用于存放内容。

当你向下滚动页面时，我使用skrollr来动画固定div顶部-100%。我对skrollr的标记就像这样data-anchor-target="#home" data-top="top:0%;"data-top-bottom="top:-100%;"，所以当父幻灯片在视口的顶部时它是位置顶部，当父幻灯片的底部在视口的顶部时它是top -100%。对吧?

第二个固定位置div比屏幕高度稍长，所以当父元素位于视口顶部时，它不是使其top -100%，而是成为相对位置。data-100-top="position:fixed;" data-top='position:relative;'

第三个div遵循与第一个相同的逻辑data-anchor-target="#exhibitions" data-top="top:0%;"data-top-bottom="top:-100%;"

这在Firefox和IE中都工作得很好，但在Chrome和Safari中，第三个div过早地开始动画。当父div位于顶部时，固定内容已经离开屏幕一半了，这让我感到困惑，因为data-top属性被设置为top:0;

下面是示例- http://dev.touch-akl.com/standout/

链接到Skrollr - https://github.com/Prinzhorn/skrollr

HTML例子

<section id="home" class="page">
    <div class="slide" data-anchor-target="#home" data-top="top:0%;"data-top-bottom="top:-100%;">
        <section class="content">
             CONTENT GOES HERE
        </section>
    </div>
</section>
<section id="about" class="page">
    <div class="slide" data-anchor-target="#about" data-100-top="position:fixed;" data-top='position:relative;'>
        <section class="content">
             CONTENT GOES HERE - THIS IS THE ONE THAT IS HIGHER THAN THE OTHERS
        </section>
    </div>
</section>
<section id="exhibitions" class="page">
    <div class="slide" data-anchor-target="#exhibitions" data-top="top:0%;"data-top-bottom="top:-100%;">
        <section class="content">
             CONTENT GOES HERE - THIS IS THE ONE THAT TRIGGERS EARLY
        </section>
    </div>
</section>
<section id="events" class="page">
    <div class="slide" data-anchor-target="#events" data-top="top:0%;"data-top-bottom="top:-100%;">
        <section class="content">
             CONTENT GOES HERE
        </section>
    </div>
</section>

Answer 1

最后在jQuery中修复了这个问题，不确定之前的方法出了什么问题，现在关于幻灯片的滚动距离的数据属性在jQuery中设置为像素，而不是HTML中的固定百分比值

    // check for desktop
    if($('body').hasClass('skrollr')){
        var $page = $('.page'),
            $slide = $('.slide');
        $slide.css({'position':'fixed'});
        $page.each(function(){
            var $this = $(this),
                $thisSlide = $this.find('.slide'),
                newHeight = $thisSlide.outerHeight();
            // if the slide contents height is less than the window height
            if(newHeight < winHeight){
                // set the height of the page and slide to the window height
                $this.add($thisSlide).css({'height':winHeight});
            }else{
                // set the height of the page and slide to the contents height
                $this.add($thisSlide).css({'height':newHeight});
                if($this.is("#about")){
                    $thisSlide.attr('data-300-top-bottom', 'top:'+ -newHeight +'px');    
                }   // if this slide was the about slide
            }   // end if this slide is smaller than the window height
        }); // end each page function
         s.refresh();  
    }   // end if was desktop