Question

我正在寻找像这样的滚动系统：

Scroll down to page, scroll up to top system like on a MEGA.co.nz download page

滚动效果很好，但是我想在内容div中使用的iframe有问题。如果我打开页面，内容部分是75％可见，上面是启动部分。我只是希望如果我打开页面，那么启动部分就完全可见了。

我的CSS：

  @font-face
{
    font-family: 'hightide'; src: url(../resources/other/HighTide.woff) format('woff');
}

@font-face
{
    font-family: 'ontwerp'; src: url(../resources/other/Ontwerp.woff) format('woff');
}

 html, body {
    height:100%;
    width:100%;
    overflow:hidden;
    margin:0;
    padding:0;
}

p::selection {background: #000000; color:#ffffff;}
p::-moz-selection {background: #000000; color:#ffffff;}

a:link
{
    text-decoration:none; font-weight:bold; color: #000;
}

a:visited
{
    text-decoration:none; font-weight:bold; color: #000;
}

#wrapper
{
    height:100%;
}

#splash
{
    position: relative;
    width: auto;
    background: url(../resources/img/background2.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    height: 100%;
}

#splash-footer
{
    position: absolute;
    top: 96%;
    height: 4%;
    background-color: black;
    width: 100%;
    text-align: center;
    color: white;
    font-family: "hightide", arial, sans-serif;
}

#content
{
    position: relative;
    height: 100%;
    overflow: auto;
}

#content-footer
{
    position: absolute;
    top: 96%;
    height: 4%;
    background-color: black;
    width: 100%;
    text-align: center;
    color: white;
    font-family: "hightide", arial, sans-serif;
}

#quote
{
    text-align: center;
    font-family: "ontwerp", arial, sans-serif;
    position: fixed;
    top: 30%;
    left: 25%;
    font-size: 3.5em;
    color: white;
    width: 50%;
    height: auto;
}

#cloudlogin
{
    background-attachment: fixed;
    width: 100%;
    height: 97%;
    bottom: 3%;
    position: relativ;
}

#headerbar
{
    position: fixed;
    z-index: 3;
    background: url(../resources/img/gamer752-header.png);
    background-size: 15% auto;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    height: 7%;
    top: 0%;
    left: 0%;
    background-color: black;
}

我的HTML：

<html>

    <head>

        <link rel="stylesheet" type="text/css" href="resources/stylesheet.css" media="screen">
        <title>amer752: Public</title>
        <link rel="icon" href="resources/img/favicon.ico" type="image/x-icon" />

        <script src="resources/js/jquery-1.10.1.js"></script>
        <script src="resources/js/jquery.mousewheel.js"></script>
        <script type="text/javascript">

//<![CDATA[ 
$(window).load(function(){
/* scroll events */
$("#splash").on("mousewheel", function (e) {
    if (e.deltaY <= 0) {
        $('#splash').animate({
            height: 0
        }, 500);
    }
});
$("#content").on("mousewheel", function (e) {
    if (e.deltaY > 0 && $(this).scrollTop() <= 0) {
        $('#splash').animate({
            height: '100%'
        }, 500);
    }
});

/* click events */
$("#splash-footer").on("click", function () {
    $('#splash').animate({
        height: 0
    }, 500);
});
$("#content-footer").on("click", function () {
    $('#splash').animate({
        height: '100%'
    }, 500);
});
});//]]>  

        </script>

        <div id="headerbar"></div>

    </head>

    <div id="wrapper">

        <div id="splash">

            <div id="quote">

                <p>The Art</p>
                <p>Of</p>
                <p>Doing Nothing.</p>

            </div>

            <div id="splash-footer">

                <p>Click here or scroll</p>

            </div>

        </div>

        <div id="content">

            <div id="cloudlogin">

                <iframe width=100% height=100% frameborder="0" src="cloud\index.html"></iframe>

            </div>

            <div id="content-footer">

                <p>Click here or scroll</p>

            </div>

        </div>

    </div>

</html>

我正在使用Chrome，只要它适用于Chrome，它就足够了。希望你们知道这件事是什么。

PS。我是stackoverflow的新手。我尽力不要像一个总菜鸟。如果有什么东西我会做得更好，只需告诉我。

感谢。

使用jquery.mousewheel.js滚动系统中的iframe不能正常工作

0 个答案: