HTML5-Titeldeckenfunktion

Decke ist ein relativ häufiger interaktiver Effekt. Wenn die Seite über den Bildschirmrand hinausgleitet, wird der Titel automatisch am Rand des Bildschirms angezeigt, um den Benutzer daran zu erinnern, welche relevanten Informationen die Titeldeckenfunktion enthält von Html5. Interessierte Freunde können sich auf

Deckenfunktion

Obergrenze ist ein relativ häufiger interaktiver Effekt, wenn die Seite verschoben wird Am Rand des Bildschirms wird der Titel automatisch an den Rand des Bildschirms angehängt, um den Benutzer daran zu erinnern.

Grundprinzip

Das in H5 implementierte Grundprinzip besteht darin, die Beziehung zwischen dem aktuellen Seitengleitabstand scrollTop und dem Abstand zwischen dem Titel zu bestimmen und den oberen Rand der Seite offsetTop , und legen Sie dann die Position des Titels fest = fest. Hier müssen Sie die Bedeutung der scrollTop- und offsetTop-Attribute verstehen.

scrollTop

stellt die Entfernung dar, um die die Bildlaufleiste nach unten scrollt, wenn eine Bildlaufleiste vorhanden ist, was der Höhe des blockierten Teils der Oberseite des Elements entspricht. scrollTop==0 ist immer wahr, wenn keine Bildlaufleiste vorhanden ist. Die Einheit ist px, lesbar und einstellbar.

offsetTop

Der Abstand zwischen der Oberseite des aktuellen Elements und der Oberseite des nächstgelegenen übergeordneten Elements hat nichts damit zu tun ob es eine Bildlaufleiste gibt oder nicht. Einheit px, schreibgeschütztes Element.

Wenn scrollTop>offsetTop, ist die Position des Titels = fest, oben = 0, sodass er am oberen Bildschirmrand fixiert ist; wenn scrollTop < offsetTop, Position abbrechen = behoben, der Code lautet wie folgt:

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

Der Effekt ist wie folgt:

Optimierung

Das Bild zeigt, dass die Grundfunktionen fast implementiert sind, aber etwas fühlt sich komisch an. Wenn die Seite nach oben gleitet, ist der Effekt relativ natürlich. Wenn die Seite jedoch nach unten gleitet, kehrt der Titel erst dann in seine ursprüngliche Position zurück, was zu einer übermäßig unnatürlichen Position führt Der Titel muss in zwei Teilen festgelegt werden: nach oben und nach unten.

Schieberichtung nach oben und unten beurteilen

Schieberichtung nach oben und unten beurteilen, klicken Sie hier

Wenn die Seite nach oben gleitet

Wenn scrollTop> ;offsetTop, die Position des Titels = fest, oben = 0, so dass er am oberen Bildschirmrand fixiert ist

Wenn die Seite nach unten gleitet

Wenn scrollTop

-Code lautet wie folgt:

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

Der Effekt ist wie folgt:

Optimierte Scroll-Drosselung

Wenn das Scroll-Ereignis für die Seite überwacht wird, wird der Scroll-Callback ausgeführt Wird beim Gleiten immer ausgeführt, was Auswirkungen auf die Seitenleistung und Drosselung hat. Eine Funktion darf nur einmal innerhalb von X Millisekunden ausgeführt werden. Der nächste Funktionsaufruf kann erst erfolgen, nachdem das von Ihnen angegebene Zeitintervall seit der letzten Funktionsausführung verstrichen ist. Der Code lautet wie folgt

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

Das obige ist der detaillierte Inhalt vonHTML5-Titeldeckenfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!