Fonction de plafond de titre HTML5

Le plafond est un effet interactif relativement courant. Lorsque la page glisse hors des limites de l'écran, le titre sera automatiquement adsorbé sur le bord de l'écran pour rappeler à l'utilisateur les informations pertinentes sur la fonction de plafond de titre. de Html5. Les amis intéressés peuvent se référer à la

fonction de plafond

le plafond est un effet interactif relativement courant Lorsque la page glisse Lorsque le titre dépasse. le bord de l'écran, le titre sera automatiquement attaché au bord de l'écran pour le rappeler à l'utilisateur.

Principe de base

Le principe de base implémenté dans H5 est de déterminer la relation entre la distance de glissement de la page actuelle scrollTop et la distance entre le titre et le haut de la page offsetTop , puis définissez la position du titre = fixe. Ici, vous devez comprendre la signification des attributs scrollTop et offsetTop.

scrollTop

représente la distance à laquelle la barre de défilement défile vers le bas lorsqu'il y a une barre de défilement, qui est la hauteur de la partie bloquée du haut de l'élément. scrollTop==0 est toujours vrai lorsqu'il n'y a pas de barre de défilement. L'unité est px, lisible et réglable.

offsetTop

La distance entre le haut de l'élément courant et le haut de l'élément parent le plus proche n'a rien à voir avec s'il y a des barres de défilement ou non. Unité px, élément en lecture seule.

Ainsi, lorsque scrollTop>offsetTop, la position du titre = fixe, top = 0, ce qui le rend fixe en haut de l'écran lorsque scrollTop < position =fixed , le code est le suivant :

 if (fixedDom[0].offsetTop - elementScrollTop < 0){
            fixedDom.addClass("road-tab-fixed")
          }else {
            fixedDom.removeClass("road-tab-fixed")
          }

L'effet est le suivant :

Optimisation

L'image montre que les fonctions de base sont presque implémentées, mais quelque chose semble bizarre. Lorsque la page glisse vers le haut, l'effet est relativement naturel. Cependant, lorsque la page glisse vers le bas, le titre ne revient à sa position d'origine que lorsque la page glisse complètement vers le haut, ce qui rend la position excessivement artificielle. le titre doit être composé de deux parties : deux situations : glisser vers le haut et vers le bas.

Jugez le sens de glissement de haut en bas

Jugez de haut en bas en glissant, cliquez ici

Quand la page glisse vers le haut

Quand scrollTop> ;offsetTop , la position du titre = fixe, top = 0, pour qu'il soit fixé en haut de l'écran

Lorsque la page glisse vers le bas

Lorsque scrollTop

est le suivant :

if(beforeElementScrollTop - elementScrollTop <=0){//up
            console.log(&#39;up&#39;);
            if (beforeOffsetTop - elementScrollTop < 0){
              fixedDom.addClass("road-tab-fixed")
            }
          }else{
            console.log(&#39;down&#39;);
            // console.log(&#39;beforeOffsetTop-----------&#39;,beforeOffsetTop);
            // console.log(&#39;elementScrollTop--------------&#39;,elementScrollTop);
            if (beforeOffsetTop - elementScrollTop >= 0){
              fixedDom.removeClass("road-tab-fixed")
            }
          }

<. 🎜>L'effet est le suivant :

Limitation de défilement optimisée

Lorsque l'événement de défilement est surveillé pour la page, le défilement le rappel sera toujours exécuté lors du glissement, affectant les performances de la page. La limitation ne permet à une fonction d'être exécutée qu'une seule fois dans un délai de X millisecondes. Le prochain appel de fonction ne peut être effectué qu'une fois l'intervalle de temps que vous spécifiez écoulé depuis la dernière exécution de la fonction. Le code est le suivant

const fixedDom = $("#road-tab"),
          isIos = utils.getMobileType(),
          tabclass = "road-tab-fixed";
        let beforeElementScrollTop = 0;
        let beforeOffsetTop = fixedDom[0].offsetTop;
        //scroll节流
        const throttle = (func,wait,mustRun) => {
          var timeout,
            startTime = new Date();

          return function() {
            var context = this,
              args = arguments,
              curTime = new Date()
            clearTimeout(timeout)
            // 如果达到了规定的触发时间间隔，触发 handler
            if(curTime - startTime >= mustRun){
              beforeElementScrollTop = document.body.scrollTop;
              console.log("beforelementScrollTop----------",document.body.scrollTop);
              func.apply(context,args);
              startTime = curTime
              // 没达到触发间隔，重新设定定时器
            }else{
              timeout = setTimeout(func, wait)
            }
          }
        }
        const winScroll = (e) => {
          const elementScrollTop=document.body.scrollTop;
          console.log('elementScrollTop--------------',elementScrollTop);
          if(beforeElementScrollTop - elementScrollTop <=0){//up
            console.log(&#39;up&#39;);
            if (beforeOffsetTop - elementScrollTop < 0){
              fixedDom.addClass("road-tab-fixed")
            }
          }else{
            if (beforeOffsetTop - elementScrollTop >= 0){console.log("UUUUUU");
              fixedDom.removeClass("road-tab-fixed")
            }
          }
        };
        $(window).off("scroll").on("scroll", throttle(winScroll,10,100));

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!