When fullpage.js last screen less than one screen, scroll mode

This two-day company website facelift used fullpage.js this plug-scrolling, scroll the page contents of the entire screen, not a problem, the Internet also has various settings document.
The problem I'm having is that when the page content dissatisfied screen, and the contents of the above would put a too crowded, let alone in space on a screen, so embarrassed to say
image description

footer is the bottom part of my part to be processed separately from the Internet a variety of information, summed up what individuals felt the easiest way to write an article for later reference.

    <!--footer及倒数第二屏的HTML-->
    <body data-spy="scroll">
      <div id="dowebok" class="container-fluid">
        <div class="section" id="nextS">
            <div class="sect ">
                    <div class="sectcenter4"></div>
            </div>
            <div class="sect sectbg2">
                <div class="container">
                    <div class="sectcenter5"></div>
                </div>
            </div>
        </div>
        <div class="section footerss"><footer class="footer" id="footer"></footer></div>
      </div>
    </body>
        //初始化滚屏的一些内容,最重要的是设置好锚点,这里重点是最后一屏(footer)的锚点footerl
        $('#dowebok').fullpage({
            verticalCentered: false,
            resize: true,
            navigation: true,
            anchors: ['section-1', 'section-2', 'lastScreen','footerl'],
        });

These finished, as shown in the following is achieved the effect accounted for the entire footer a screen, and is displayed vertically centered. According to the effect to be achieved, to do it is to let footer #nextS the next screen (not centered vertically) + to #nextS this screen time, and then scroll down the screen a distance will not be a (must be footer height). Pressing the whole idea, to solve problems css
image description

    .section.footerss .fp-tableCell{//修改最后一屏display属性
        display: block!important;
    }
//实现footer紧挨着#nextS这一屏显示,底部出现

image description
Modify the following question fullpage.js to find performMovement this method fullpage.js documents cited, as follows, to change it, you can achieve the desired effect (footer next to the previous screen, and scroll the height footer of height)

function performMovement(v){  
    // using CSS3 translate functionality  
    if (options.css3 && options.autoScrolling && !options.scrollBar) {  
      if (v.anchorLink == 'footerl'){ //当滚屏到最后一屏时间 
        footer_a = $('#nextS').height();//倒数第二屏的高度  
        footer_h = $('#footer').height();  //footer的高度
        var translate3d = 'translate3d(0px, -' + (v.dtop - footer_a + footer_h) + 'px, 0px)';  
      }else{  
       var translate3d = 'translate3d(0px, -' + v.dtop + 'px, 0px)';  
     }  
     transformContainer(translate3d, true);  
     setTimeout(function () {  
       afterSectionLoads(v);  
     }, options.scrollingSpeed);  
   }  
   // using jQuery animate  
   else{  
     var scrollSettings = getScrollSettings(v);  
     $(scrollSettings.element).animate(  
       scrollSettings.options  
       , options.scrollingSpeed, options.easing).promise().done(function () { //only one single callback in case of animating  `html, body`  
       afterSectionLoads(v);  
      });  
   }  
 }  

After such a modification, do not worry about the last screen grievances of the screen.

Guess you like

Origin www.cnblogs.com/jlfw/p/12034677.html