1

我将 Skrollr 用于我的 ipad 和桌面尺寸，但因为我使网站具有响应性，所以我关闭了 Skrollr，以便我的内容可以堆叠。我似乎遇到问题的一件事是让我的内容容器（部分标签）调整到窗口的高度。他们默认回到这些标签内的任何内容的高度，即使 CSS 给出了最小高度和 100% 的高度。我通过在 javaScript 中强制高度来使其工作，但我认为我不应该这样做？

HTML

<section id='sectionOne' data-0="transform:translate(0%,0%);" data-100p="transform:translate(0%,-50%);"> <h1>SECTION 1</h1> </section>

<section id='sectionTwo' data-0="transform:translate(0%,100%);" data-200p="transform:translate(0%,0%);" data-300p="transform:translate(0%,-50%);"> <h1>SECTION 2</h1> </section>

CSS

html{
height: 100%;
width: 100%;

}

body{
background-color: black;
height: 100%;
width: 100%;

}

section{
height: 100%;
min-height: 100%;
overflow: hidden;
width: 100%;
border-top: black 1px solid;

}

#sectionOne{
height: 100%;
min-height: 100%;
width: 100%;
background-color:#00ff00;

}

#sectionOne{
height: 100%;
min-height: 100%;
width: 100%;
background-color:#ffb227;

}

javascript:

var s;

// set breakpoitns
$(window).setBreakpoints({
    // use only largest available vs use all available
    distinct: true, 
    // array of widths in pixels where breakpoints
    breakpoints: [
        320,
        480,
        768  
    ] 
}); 

$(window).bind('enterBreakpoint320',function() {
    console.log("this is now 320");

    if(s != undefined)
    {
        console.log('destroy');
        s = skrollr.init().destroy();
    }
    console.log(s);
});

$(window).bind('enterBreakpoint480',function() {
    console.log("this is now 480");

    if(s != undefined)
    {
        console.log('destroy');
        s = skrollr.init().destroy();
    }
    // force the sections to be the hight of the view port
    $('#sectionOne').height($(window).height());
    $('#sectionTwo').height($(window).height());
    console.log(s);
});

$(window).bind('enterBreakpoint768',function() {
    console.log("this is now 768");
    s = skrollr.init({
            forceHeight: true
        });
    console.log(s);

});
4

0 回答 0