Question

我正在开发一个打破默认页面功能的页面。它会像这样工作：

一旦你第一次开始滚动页面，一个闪烁的屏幕排序会在背景和飞溅被修复的情况下逐渐消失，一旦你像2400px一样晃动，滚动开始表现正常。这是我正在努力的解决方案：

<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都设置为固定位置。然后，我会监听滚动事件，并根据页面滚动的距离设置启动的不透明度。一旦页面滚动到目前为止，以便初始化具有不透明度：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：。固定{ 位置：固定; 顶部：0; 宽度：100％; margin-top：0; }

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

Answer 1

如果您将其设置为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;
}

设定固定元件的高度

1 个答案: