在响应性设计、css或parralax问题中向下滚动太长时间？

我似乎无法在响应性设计的模板中找到我的问题。 在电脑屏幕上，它是完美的，但在任何其他媒体屏幕上，你必须向下滚动很长时间。目前的网站是：www.twins-pisces.be 你能找到我在这方面的问题吗

这是我的css：

/*中等*/

@media screen and (max-width: 980px) {

    /* Basic */

        body, input, select, textarea {
            font-size: 12pt;
        }

    /* Spotlight */

        .spotlight {
            background-attachment: scroll;
            height: auto;
        }

            .spotlight .image.main {
                display: block;
                margin: 0;
                max-height: 40vh;
                overflow: hidden;
            }

            .spotlight .content {
                background-color: #1c1d26;
                border-width: 0 !important;
                border-top-width: 0.35em !important;
                bottom: auto !important;
                left: auto !important;
                padding: 4.5em 2.5em 2.5em 2.5em !important;
                position: relative;
                right: auto !important;
                text-align: center;
                top: auto !important;
                width: 100% !important;
            }

            .spotlight .goto-next {
                display: none;
            }

    /* Wrapper */

        .wrapper {
            padding: 4.5em 2.5em 2.5em 2.5em;
        }

    /* Banner */

        #banner {
            background-attachment: fixed;
        }

            #banner .goto-next {
                height: 7em;
            }

            #banner .content {
                padding: 0;
                text-align: center;
            }

                #banner .content header {
                    display: block;
                    margin: 0 0 2em 0;
                    text-align: center;
                }

                #banner .content .image {
                    margin: 0;
                }

    /* Footer */

        #footer {
            padding: 4.5em 0;
        }

}

/*小的*/

#navPanel, #titleBar {
    display: none;
}

@media screen and (max-width: 736px) {

    /* Basic */

        html, body {
            overflow-x: hidden;
        }

        body, input, select, textarea {
            font-size: 12pt;
        }

        h2 {
            font-size: 1.5em;
        }

        h3 {
            font-size: 1.2em;
        }

        h4 {
            font-size: 1em;
        }

    /* Section/Article */

        header p br {
            display: none;
        }

        header h2 + p {
            font-size: 1em;
        }

        header h3 + p {
            font-size: 1em;
        }

        header h4 + p,
        header h5 + p,
        header h6 + p {
            font-size: 0.9em;
        }

        header.major {
            margin: 0 0 2em 0;
        }

    /* Goto Next */

        .goto-next:before {
            height: 0.8em;
            margin: -0.4em 0 0 -0.6em;
            width: 1.2em;
        }

    /* Spotlight */

        .spotlight {
            box-shadow: 0 0.125em 0.5em 0 rgba(0, 0, 0, 0.25);
        }

            .spotlight .image.main {
                max-height: 60vh;
            }

            .spotlight .content {
                border-top-width: 0.2em !important;
                padding: 3.25em 1.5em 1.25em 1.5em !important;
            }

    /* Wrapper */

        .wrapper {
            padding: 3.25em 1.5em 1.25em 1.5em;
        }

    /* Header */

        #header {
            display: none;
        }

    /* Banner */

        #banner {
            box-shadow: 0 0.125em 0.5em 0 rgba(0, 0, 0, 0.25);
            min-height: calc(100vh - 44px);
        }

            #banner:before {
                height: calc(100vh - 44px);
            }

            #banner .content {
                padding: 0em;
            }

                #banner .content header h2 {
                    font-size: 1.5em;
                }

                #banner .content .image {
                    height: 1em;
                    width: 1em;
                }

    /* Off-Canvas Navigation */

        #page-wrapper {
            -moz-backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            backface-visibility: hidden;
            -moz-transition: -moz-transform 0.5s ease;
            -webkit-transition: -webkit-transform 0.5s ease;
            -ms-transition: -ms-transform 0.5s ease;
            transition: transform 0.5s ease;
            padding-bottom: 1px;
            padding-top: 44px !important;
        }

        #titleBar {
            -moz-backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            backface-visibility: hidden;
            -moz-transition: -moz-transform 0.5s ease;
            -webkit-transition: -webkit-transform 0.5s ease;
            -ms-transition: -ms-transform 0.5s ease;
            transition: transform 0.5s ease;
            display: block;
            height: 44px;
            left: 0;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 10001;
            background: #272833;
            box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);
        }

            #titleBar .title {
                color: #ffffff;
                display: block;
                font-weight: 300;
                height: 44px;
                line-height: 44px;
                text-align: center;
            }

                #titleBar .title a {
                    color: inherit;
                    border: 0;
                }

            #titleBar .toggle {
                text-decoration: none;
                height: 60px;
                left: 0;
                position: absolute;
                top: 0;
                width: 90px;
                outline: 0;
                border: 0;
            }

                #titleBar .toggle:before {
                    -moz-osx-font-smoothing: grayscale;
                    -webkit-font-smoothing: antialiased;
                    font-family: FontAwesome;
                    font-style: normal;
                    font-weight: normal;
                    text-transform: none !important;
                }

                #titleBar .toggle:before {
                    background: #e44c65;
                    color: rgba(255, 255, 255, 0.5);
                    content: '\f0c9';
                    display: block;
                    font-size: 18px;
                    height: 44px;
                    left: 0;
                    line-height: 44px;
                    position: absolute;
                    text-align: center;
                    top: 0;
                    width: 54px;
                }

        #navPanel {
            -moz-backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            backface-visibility: hidden;
            -moz-transform: translateX(-275px);
            -webkit-transform: translateX(-275px);
            -ms-transform: translateX(-275px);
            transform: translateX(-275px);
            -moz-transition: -moz-transform 0.5s ease;
            -webkit-transition: -webkit-transform 0.5s ease;
            -ms-transition: -ms-transform 0.5s ease;
            transition: transform 0.5s ease;
            display: block;
            height: 100%;
            left: 0;
            overflow-y: auto;
            position: fixed;
            top: 0;
            width: 275px;
            z-index: 10002;
            background: #181920;
            padding: 0.75em 1.25em;
        }

            #navPanel .link {
                border: 0;
                border-top: solid 1px rgba(255, 255, 255, 0.05);
                color: rgba(255, 255, 255, 0.75);
                display: block;
                height: 3em;
                line-height: 3em;
                text-decoration: none;
            }

                #navPanel .link:hover {
                    color: inherit !important;
                }

                #navPanel .link:first-child {
                    border-top: 0;
                }

                #navPanel .link.depth-0 {
                    color: #ffffff;
                    font-weight: 300;
                }

                #navPanel .link .indent-1 {
                    display: inline-block;
                    width: 1.25em;
                }

                #navPanel .link .indent-2 {
                    display: inline-block;
                    width: 2.5em;
                }

                #navPanel .link .indent-3 {
                    display: inline-block;
                    width: 3.75em;
                }

                #navPanel .link .indent-4 {
                    display: inline-block;
                    width: 5em;
                }

                #navPanel .link .indent-5 {
                    display: inline-block;
                    width: 6.25em;
                }

        body.navPanel-visible #page-wrapper {
            -moz-transform: translateX(275px);
            -webkit-transform: translateX(275px);
            -ms-transform: translateX(275px);
            transform: translateX(275px);
        }

        body.navPanel-visible #titleBar {
            -moz-transform: translateX(275px);
            -webkit-transform: translateX(275px);
            -ms-transform: translateX(275px);
            transform: translateX(275px);
        }

        body.navPanel-visible #navPanel {
            -moz-transform: translateX(0);
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
        }

    /* Footer */

        #footer {
            padding: 3.25em 1.5em;
        }

}

/*XSmall*/

@media screen and (max-width: 480px) {

    /* Basic */

        html, body {
            min-width: 320px;
        }

        body, input, select, textarea {
            font-size: 12pt;
        }

    /* List */

        ul.actions {
            margin: 0 0 2em 0;
        }

            ul.actions li {
                display: block;
                padding: 1em 0 0 0;
                text-align: center;
                width: 100%;
            }

                ul.actions li:first-child {
                    padding-top: 0;
                }

                ul.actions li > * {
                    margin: 0 !important;
                    width: 100%;
                }

            ul.actions.small li {
                padding: 0.5em 0 0 0;
            }

                ul.actions.small li:first-child {
                    padding-top: 0;
                }

    /* Button */

        input[type="submit"],
        input[type="reset"],
        input[type="button"],
        .button {
            padding: 0;
        }

    /* Spotlight */

        .spotlight .image.main {
            max-height: 50vh;
        }

        .spotlight .content {
            padding: 3em 1.25em 1em 1.25em !important;
        }

    /* Wrapper */

        .wrapper {
            padding: 3em 1.25em 1em 1.25em;
        }

    /* Banner */

        #banner .content {
                padding: 3em 1.5625em 5.25em 1.5625em;
        }

列表项

Html代码：

     <section id="banner">
         <div class="content">
             <header>
                 <h2>TWINS & PISCES FASHION</h2>
                 <p>Fashion homeparty's en B2B evenement. </p><p>Verkoop van Italiaanse damestextiel en mode-accessoires. </p>
             </header>
             <span class="image"><img src="images/pic01.jpg" alt="" /> </span>
        </div>
        <a href="#one" class="goto-next scrolly">Volgende</a>
    </section>

---

问题可能出现在class.style1或.bottom内部，因为它从中开始

---

第一部分内容无法上升。也许您可以尝试修改这些类，以获得更好的响应性网页设计。

您是否可以尝试生成出现问题的最小可能情况？这是一个庞大的代码梳理通过。谢谢你MarioKart，但我不知道如何修改。我已经试过不同的东西，但不起作用我不知道我应该试什么。。

var $banner = $('#banner');
$banner._parallax();