Javascript Skrollr相对上下火灾早在铬

我有几个相对定位的div堆叠在一起，高度为100%，jQuery处于加载状态。 在每个相对定位的div中都有一个固定的div，用于保存内容

当你向下滚动页面时，我正在使用skrollr制作固定divs top-100%的动画。 我对skrollr的标记如下

数据锚定目标=“#home”data top=“top:0%”data top-bottom=“top:-100%”

因此，当父幻灯片位于视口顶部时，它是位置顶部，当父幻灯片底部位于视口顶部时，它是顶部-100%。对吧?

第二个固定位置div比屏幕高度稍长，因此当父对象位于视口顶部时，它将成为相对位置，而不是使其位于顶部（100%）<代码>数据-100-top=“位置：固定；”数据top=“位置：相对；”

第三个div遵循与第一个div相同的逻辑

data-anchor-target=“#experiments”data-top=“top:0%”data-top-bottom=“top:-100%”

这一切在Firefox和IE中都很好，但在Chrome和Safari中，第三版的动画开始得太早了。当父div位于顶部时，固定内容已经从屏幕上消失了一半，这让我感到困惑，因为data top属性设置为top:0

以下是一个例子-

链接到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>

内容在这里
内容在这里-这是一个高于其他的
内容在这里-这是一个早期触发
内容在这里

最终在jQuery中对此进行了修复，不确定以前的方式有什么问题，现在在jQuery中将about幻灯片的滚动距离的数据属性设置为像素，而不是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 

//检查桌面
if（$（'body'）.hasClass（'skrollr'））{
变量$page=$（'.page'），
$slide=$（“.slide”）；
$slide.css（{'position'：'fixed'}）；
$page.each（函数（）{
变量$this=$（this），
$thisSlide=$this.find（'.slide'），
newHeight=$thislide.outerHeight（）；
//如果幻灯片内容高度小于窗口高度
如果（新高度

我看不出Chrome（Ubuntu上的26.0.1410.63版）有什么不同