One Page Scroll footer doesn't show

Question

I'm using this plugin https://github.com/peachananr/onepage-scroll for my portfolio. It works fine, the only problem I have is that the footer is not displaying with the height I want(height: 150px).

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

If I add the class section to the footer it will work but it will make the footer height 100%.

I found another plugin http://alvarotrigo.com/fullPage/ which can solve this problem, but I don't want to change it because of one issue only.

If someone can help me solve this problem I will be very thankful.

Can we see a jsfiddle or some more code, it could be a variety of things. Try min height instead of height. — Jacob Price, Dec 28 '16 at 14:03
You actually didn't specify if the footer is smaller than 150px or bigger. Do include some code, but this in particular would be important to mention. — Serg Chernata, Dec 28 '16 at 14:07

Ivan Chaer · Accepted Answer · 2017-01-02T21:09:33.117

1

I didn't see any built-in way to do that. Are you willing to patch the plugin? If so, after line:

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

Add:

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

And on the CSS, supposing your footer is on .page3:

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

See it working.

edited Jan 02 '17 at 21:09

answered Dec 28 '16 at 20:28

Ivan Chaer

6,980
1
38
48

You should use `sections.eq(-1).outerHeight();`. JQuerys `.height` function sometimes returns messed up results (https://stackoverflow.com/questions/12184133/jquery-wrong-values-when-trying-to-get-div-height) – Maxim Kopecki Jun 05 '19 at 08:39

score 0 · Answer 2 · answered Dec 28 '16 at 14:09

0

You can try it in css with important like this:

footer {
 height: 150px !important;
}

answered Dec 28 '16 at 14:09

Tobias Egli

73
7

This could work unless height is being set in js via the plugin. – Serg Chernata Dec 28 '16 at 14:11
@SergChernata Only if that height being set is set to !important. Otherwise, it'd still overwrite, since it is set to !important.. – Andrew Ice Dec 28 '16 at 17:38

score 0 · Answer 3 · answered Feb 06 '19 at 10:46

if function:

this.moveDown = function(e) {

after:

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

add:

   /*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 in function:

  this.moveUp = function(e) {

after:

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

add:

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

in initialization add selector to your footer

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

One Page Scroll footer doesn't show

3 Answers3