Question

我使用单页滚动创建单页滚动效果，如here.所示

它在本地运行良好，也在此JSFiddle

HTML：

<div class="embrulho">
    <div class="corpo">
        <section class="page1">
            <div class="page_container">
                 <h1>Benefício1</h1>

                 <h2>Qualquer coisa de especial!</h2>

                <p>Created by Yoooo</p>
            </div>
            <img src="http://www.portal-gestao.com/app/onepage/back-phone.png" alt="phones">
        </section>
        <section class="page2">
            <div class="page_container">
                 <h1>Benefício 2</h1>

                 <h2>eBudget é tudo o que precisas man...</h2>
    <code class="js">
                      $(".corpo").onepage_scroll();
                    </code>

            </div>
        </section>
        <section class="page3">
            <div class="page_container">
                 <h1>É muita bonito não!?</h1>

                 <h2>É mesmo lindo!</h2>

            </div>
        </section>
    </div>
</div>

JS：

$(document).ready(function () {
    $(".corpo").onepage_scroll({
        sectionContainer: "section",
        responsiveFallback: 600,
        loop: true
    });
});

CSS：

.embrulho {
    height: 100% !important;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
}
.corpo {
    float: left;
    width: 100%;
    margin: 0 auto;
}
.corpo section {
    overflow: hidden;
}
.corpo section .page_container {
    position: relative;
    top: 25%;
    margin: 0 auto 0;
    max-width: 950px;
    z-index: 3;
}
.corpo section.page2 {
    background: #555557 url('../onepage/phones.png') no-repeat center -150px;
}
.corpo section.page2 .page_container {
    margin-top: 240px;
    overflow: hidden;
}
.corpo section .page_container {
    position: relative;
    top: 25%;
    margin: 0 auto 0;
    max-width: 950px;
    z-index: 3;
}
code {
    margin: 20px 1%;
    float: left;
    width: 48%;
    height: 105px;
    background: rgba(0, 0, 0, 0.1);
    border: rgba(0, 0, 0, 0.05) 5px solid;
    border-radius: 5px;
    padding:5px;
    color: white;
    text-align: center;
    font-size: 15px;
    margin-top: 25px;
    display: block;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
code.html {
    color: #7EC9E6;
}
code.js {
    color: #FFAD00;
}

但它不是在服务器上工作，我猜是因为与模板冲突。见here.

我尝试尽可能地检测和清除冲突，但无法弄清楚为什么这不起作用？

Answer 1

我通过简单地用Joomla创建一个文件夹来解决这个问题。

使一页滚动工作

1 个答案: