固定元素的设置高度 [英] Setting height of fixed element

问题描述

我正在处理破坏默认页面功能的网页。它将这样工作：

一旦你第一次开始滚动页面，一个闪屏排序的屏幕渐渐下降，而背景和飞溅是固定的，一旦你有潦草的东西像2400px，滚动开始表现正常。这是我正在处理的解决方案：

 < div class =wrapper> 
< / p>其余内容< / p> 
< / div> 
< div class =splash> 
< p>具有100％高度和宽度的Splash内容< / p> 
< / div> 
  

加载页面后，两个div都设置为位置固定。然后我监听滚动事件，并根据页面滚动的距离设置飞溅的不透明度。一旦页面滚动到目前为止，以便飞溅具有不透明度：0，我设置包装器显示：static和margin-top：2400，以使转换到正常滚动行为。 （这是使用下面的 addClass（fixed）完成的。

  $文档）.scroll（function（）{
 var scrolllength = parseInt（$（window）.scrollTop（））; 
 switch（true）{
 
 
 / / y2004开始显示
 case（scrolllength> y2004）：
 console.log（'above 2004 bottom'）
 $（'。wrapper'）removeClass（'fixed'）; 
 break; 
 
 
 // y2003完全可见
 case（scrolllength> y2003bottom）：
 console.log（'below below 2003 bottom'） 
 $（'。wrapper'）。addClass（'fixed'）
 
 $（'splash'）。css（'display'，'none'）; 
 $ （'.text'）。fadeIn（'fast'）; 
 
 break; 
 
 //向上滚动，splash开始显示
 case（scrolllength< ; y2003bottom&&& scrolllength> 0）：
 console.log（'above 2003 bottom'+ scrolllength）
 var splashopacity =（（y2003bottom -scrolllength）/ y2003bottom）; 
 $（。splash）。css（'opacity'，（splashopacity））; 
 //再次显示飞溅
 $（'。splash'）。css（'display'，'block'）; 
 $（'。text'）。fadeOut（'fast'）; 
 break; 
 
 
 //默认
默认值：
 console.log（scrolllength）; 
 return; 
} 
}）; 
  

固定css：
.fixed {
position：fixed;
top：0;
width：100％;
margin-top：0;
}

这种方法效果很好。唯一的问题是，当我将包装器设置为固定时，它失去了它的高度。这反过来使得它不可能滚动。我想让文档基于.wrapper的内容来扩展窗口大小。或实现类似目标的任何其他解决方案。

如果将它设置为 position：absolute;

/ code>，它没有非静态定位的父母，应该修复它。如你所知，固定元素不会为文档贡献高度，而绝对的。

将body高度设置为包装器高度将给你固定位置的滚动行为，如果这是你需要的

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

 < div class ='wrapper'>点击我< / 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; 
} 
  

I'm working on a page that breaks the default page functionality. It's gonna work like this:

Once you first start scrolling the page, a splash-sort-of-screen fades down whilst the background and splash are fixed, once you have scolled something like 2400px, the scroll starts to behave as normal. This is the solution i'm working on:

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

Once you load the page, both div:s are set to position fixed. I then listen for scroll-events and set the opacity of the splash based on how far down the page has scrolled. Once the page has scrolled so far so that the splash has opacity: 0, I set the wrapper to display: static and margin-top: 2400, to make the transition to normal scrolling behaviour. (this is done using addClass(fixed) below.

$(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;
    }
});

fixed css: .fixed{ position: fixed; top: 0; width: 100%; margin-top: 0; }

This approach works well. The only problem is that when I set the wrapper to "fixed" it loses it's height. This in turn makes it impossible to scroll. I would like the document to expand the window-size based on the content of .wrapper. Or any other solution that achieves a similiar goal. Css is preferred but javascript is fine aswell!

解决方案

If you set it to position: absolute;, and it has no non-statically positioned parents, that should fix it. As you've noted, fixed elements don't contribute height to the document, whereas absolute ones do.

Setting the body height to the wrapper height will give you scroll behavior with fixed positioning, if that's what you need

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;
}

这篇关于固定元素的设置高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！