Méthode de défilement Fullpage.js-js tutoriel-php.cn

Méthode de défilement Fullpage.js

php中世界最好的语言

Libérer： 2018-03-23 16:46:53

original

2191 Les gens l'ont consulté

Cette fois je vais vous présenter la méthode de défilement de fullpage.js pour implémenter le défilement de fullpage.js Quelles sont les précautions Voici un cas pratique, jetons un oeil.

Au cours des deux derniers jours, le site Web de l'entreprise a été révisé à l'aide du plug-in de défilement fullpage.js. Le contenu de la page peut défiler sur tout l'écran sans aucun problème. Il existe également des documents pour divers paramètres. l'Internet.
Le problème que j'ai rencontré est que lorsque le contenu de la page ne tient pas sur l'écran, il est trop encombré lorsqu'il est placé avec le contenu ci-dessus, et il devient trop vide lorsqu'il est placé seul sur l'écran. C'est tellement embarrassant à dire.

La partie du pied de page en bas est la partie que je souhaite traiter séparément. J'ai recherché diverses informations sur Internet et je les ai résumées. Je pense personnellement que le moyen le plus simple est de le faire. pour écrire un article pour référence future.

  <!--footer及倒数第二屏的HTML-->
  <body data-spy="scroll">
   <p id="dowebok" class="container-fluid">
    <p class="section" id="nextS">
      <p class="sect ">
          <p class="sectcenter4"></p>
      </p>
      <p class="sect sectbg2">
        <p class="container">
          <p class="sectcenter5"></p>
        </p>
      </p>
    </p>
    <p class="section footerss"><footer class="footer" id="footer"></footer></p>
   </p>
  </body>

Copier après la connexion

    //初始化滚屏的一些内容，最重要的是设置好锚点，这里重点是最后一屏（footer）的锚点footerl
    $('#dowebok').fullpage({
      verticalCentered: false,
      resize: true,
      navigation: true,
      anchors: ['section-1', 'section-2', 'lastScreen','footerl'],
    });

Copier après la connexion

Après avoir écrit ceci, l'effet est comme indiqué ci-dessous. L'ensemble du pied de page occupe un écran et est affiché verticalement au centre.

Selon l'effet que vous souhaitez obtenir, ce que vous devez faire est de rapprocher le pied de page de l'écran #nextS (non centré verticalement) + lorsqu'il atteint le #nextS screen, La distance de défilement plus bas ne peut pas être d'un écran (elle doit être la hauteur du pied de page).
Selon l'idée générale, résolvez d'abord le problème de css

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

Copier après la connexion

Modifiez le problème de fullpage.js ci-dessous et citez la page complète de dans . Recherchez la méthode performMovement dans le fichier js et modifiez-la comme suit pour obtenir l'effet souhaité (le pied de page est à côté de l'écran précédent et la hauteur de défilement est la hauteur du pied de page)

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); 
 　　　　　}); 
 　　} 
 }

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment résoudre l'échec de l'installation de npm

Le type d'énumération Vue implémente HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!