Question

我有几个相对定位的div堆叠在彼此顶部，高度为100％，在加载时使用jQuery设置。在每个相对位置div内部是一个固定内容的固定div。

当你向下滚动页面时，我使用skrollr为固定的div设置顶部-100％的动画。我的skrollr标记就像这个data-anchor-target="#home" data-top="top:0%;"data-top-bottom="top:-100%;"所以当父幻灯片位于视口的顶部时，它位于顶部，当父幻灯片的底部位于视口的顶部时，它位于顶部-100％。正确？

第二个固定位置div的长度比屏幕高度长，因此当父级位于视口顶部时，它不会使其位于顶部-100％，而是变为位置相对。 data-100-top="position:fixed;" data-top='position:relative;'

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

相同的逻辑

这一切在Firefox和IE中运行良好，但在Chrome和Safari中，第3个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中的固定百分比值< / p>

    // 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

Skrollr相对顶部的底部在chrome中爆发

1 个答案: