Question

我正在使用此插件https://github.com/peachananr/onepage-scroll作为我的投资组合。它工作正常，我唯一的问题是页脚没有显示我想要的高度（高度：150px）。

<div class="main">
<div class="section">1</div>
<div class="section">2</div>
<div class="section">3</div>
<footer>Text</footer>
</div>

如果我将类部分添加到页脚，它将起作用，但它会使页脚高度为100％。

我找到了另一个可以解决这个问题的插件http://alvarotrigo.com/fullPage/，但我不想因为一个问题而改变它。

如果有人可以帮我解决这个问题，我将非常感激。

Answer 1

我没有看到任何内置的方法来做到这一点。你愿意修补这个插件吗？如果是这样，在行之后：

$.fn.transformPage = function(settings, pos, index) {

添加：

if (pos <= -(total - 1) * 100) {
    footer_height = sections.eq(-1).height();
    footer_percent = footer_height / $(this).height();
    pos = pos + 100 - (footer_percent * 100);
}

在CSS上，假设您的页脚在.page3：

.onepage-wrapper .section.page3 {
    height: 150px;
}

See it working

Answer 2

您可以在css中尝试使用这样的重要内容：

footer {
 height: 150px !important;
}

Answer 3

如果功能：

this.moveDown = function(e) {

之后：

if (i.loop == true) {
    pos = 0;
    r = document.querySelector(i.sectionContainer + "[data-index='1']");
  }

添加：

   /*VM Cusom code for footer */
      else if(i.footer) {
        const footer = document.querySelector(i.footer);
        const footerHeight = footer.offsetHeight;
        const footerStyle = window.getComputedStyle(footer);
        const footerOuterHeight = footerHeight + parseInt(footerStyle.marginTop)  + parseInt(footerStyle.marginBottom);
        const footerPercent = footerOuterHeight / e.offsetHeight;
        if(pos >= ((t-1) * -100)){
          pos = pos - (footerPercent * 100);
          r = document.querySelector(i.sectionContainer + "[data-index='" + (parseInt(t)) + "']");
        }
        else {
          return;
        }
      }
    /*VM Cusom code for footer */

AND功能

  this.moveUp = function(e) {

之后：

if (!r) {
      if (i.loop == true) {
        pos = (u - 1) * 100 * -1;
        r = document.querySelector(
          i.sectionContainer + "[data-index='" + u + "']"
        );
      }
      else {
        return;
      }
    }

添加：

else if(t == u && (pos < ((t-1) * -100))) {
  pos = (r.dataset.index) * 100 * -1;
  r = document.querySelector(
    i.sectionContainer + "[data-index='" + u + "']"
  );
}

在初始化时将选择器添加到页脚

onePageScroll(".home", { 
    footer: "footer" 
});

单页滚动页脚未显示

3 个答案: