HTML5のタイトル上限機能-H5 チュートリアル-php.cn

HTML5のタイトル上限機能

不言

リリース： 2018-06-05 15:39:38

オリジナル

2857 人が閲覧しました

天井は比較的一般的なインタラクティブ効果で、ページが画面の境界から滑り出すと、タイトルが自動的に画面の端に吸着され、ユーザーに注意を促します。この記事では、HTML5 のタイトル天井機能の関連情報を主に紹介します。興味のある方は、

天井機能を参照してください

天井は、ページが画面の境界線からスライドすると、画面の端に自動的に吸着されます。ユーザーにプロンプトを表示する画面。

基本原則

H5で実装される基本原則は、現在のページのスライド距離scrollTopとタイトルとページ上部の距離offsetTopの関係を求め、タイトルの位置を設定することです。 = 固定。ここでは、scrollTop 属性と offsetTop 属性の意味を理解する必要があります。

scrollTop

は、スクロールバーがある場合にスクロールバーが下にスクロールする距離を表し、要素の上部のブロックされた部分の高さになります。スクロールバーがない場合、scrollTop==0 は常に true です。単位は px で、読み取りおよび設定が可能です。

offsetTop

現在の要素の上部と最も近い親要素の上部の間の距離は、スクロールバーの有無とは関係ありません。単位 px、読み取り専用要素。

つまり、scrollTop>offsetTopの場合、タイトルの位置=固定、トップ=0となり、scrollTop

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

ログイン後にコピー

効果は以下の通り:

最適化

写真では基本的な機能はほぼ実装されているのですが、何か違和感があります。ページが上にスライドする場合は比較的自然な効果ですが、ページが下にスライドする場合はページが一番上までスライドするまでタイトルが元の位置に戻るため、過度に不自然な位置になります。タイトルは 2 つの部分に分けて設定する必要があります。上下にスライドする 2 つの状況があります。

上下のスライド方向を決定するには

上下のスライドを決定するにはここをクリック

ページが上にスライドするとき

scrollTop>offsetTopの場合、タイトルの位置=固定、トップ=0となるため、は画面の上部に固定されています。

ページが下にスライドするとき

scrollTop

コードは次のとおりです。

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

ログイン後にコピー

効果は次のとおりです:

最適化されたスクロールスロットル

スクロールイベントがページ上で監視されている場合、スライド時にスクロールコールバックが常に実行され、ページのパフォーマンス、スロットリングにより、関数の実行は X ミリ秒以内に 1 回のみ許可されます。最後の関数の実行から指定した時間が経過した場合にのみ、次の関数呼び出しを行うことができます。コードは次のとおりです

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(&#39;elementScrollTop--------------&#39;,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));

ログイン後にコピー

以上がHTML5のタイトル上限機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。