1

我正在处理一个破坏默认页面功能的页面。它会像这样工作：

一旦你第一次开始滚动页面，当背景和启动画面被固定时，一个闪屏类型的屏幕会淡出，一旦你滚动到 2400 像素之类的东西，滚动就会开始正常运行。这是我正在研究的解决方案：

<div class="wrapper">
   </p>Rest of the content</p>
</div>
<div class="splash" >
   <p>Splash-content that has 100% height and width</p>
</div>

加载页面后，两个 div:s 都设置为固定位置。然后我监听滚动事件并根据页面向下滚动的距离设置启动画面的不透明度。一旦页面滚动到现在，启动画面的 opacity: 0，我将包装器设置为 display: static 和 margin-top: 2400，以过渡到正常的滚动行为。（这是使用addClass(fixed)下面完成的。

$(document).scroll(function(){
    var scrolllength = parseInt($(window).scrollTop());
    switch(true) {


        //y2004 starts to show
        case (scrolllength > y2004):
            console.log('above 2004 bottom')
            $('.wrapper').removeClass('fixed');
            break;


        //y2003 is fully visible
        case (scrolllength > y2003bottom):
            console.log('below 2003 bottom')
            $('.wrapper').addClass('fixed')

            $('.splash').css('display','none');
            $('.text').fadeIn('fast');

            break;

        //scrolling up, splash starts to show again
        case (scrolllength < y2003bottom && scrolllength > 0):
            console.log('above 2003 bottom '+scrolllength)
            var splashopacity = ((y2003bottom -scrolllength)/y2003bottom );
            $(".splash").css('opacity',(splashopacity));
            //show the splash again
            $('.splash').css('display', 'block');
            $('.text').fadeOut('fast');
            break;


        //default
        default:
            console.log(scrolllength);
            return;
    }
});

固定 css：.fixed{ 位置：固定；顶部：0；宽度：100%；边距顶部：0；}

这种方法效果很好。唯一的问题是，当我将包装器设置为“固定”时，它会失去它的高度。这反过来又使滚动变得不可能。我希望文档根据 .wrapper 的内容扩展窗口大小。或任何其他实现类似目标的解决方案。Css 是首选，但 javascript 也很好！

4

1 回答 1

2

如果您将其设置为position: absolute;，并且它没有非静态定位的父母，那应该可以解决它。正如您所注意到的，固定元素不会为文档贡献高度，而绝对元素会。

将正文高度设置为包装器高度将为您提供具有固定定位的滚动行为，如果这是您需要的

http://jsfiddle.net/ULLBw/3/

<div class='wrapper'>click me</div>

js

$('.wrapper').on( 'click', function() {
    $(this).toggleClass('fixed');
});

$('body').height( $('.wrapper').height() );

css

.wrapper {
    height: 2000px;
    width: 100%;
    position: absolute;
    top: 0

    background-color: #e0e0e0;
}

.wrapper.fixed {
    position: fixed;
}
于 2013-07-15T09:24:05.897 回答