0

我有几个相对定位的 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 遵循与第一个相同的逻辑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>
4

1 回答 1

2

最后在 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
于 2013-04-15T20:33:13.087 回答