HTML5 제목 천장 기능

천장은 비교적 일반적인 인터랙티브 효과입니다. 페이지가 화면 경계 밖으로 슬라이드되면 제목이 자동으로 화면 가장자리에 흡착되어 사용자에게 상기시켜줍니다. 이 글에서는 주로 HTML5의 제목 천장 기능에 대한 관련 정보를 소개합니다. . 관심이 있으시면

천장 기능을 참고하세요

천장은 페이지가 화면 테두리 밖으로 미끄러지면 자동으로 가장자리에 흡착됩니다. 사용자에게 메시지를 표시하는 화면입니다.

기본 원리

H5에서 구현한 기본 원리는 현재 페이지 슬라이딩 거리인 ScrollTop과 제목과 페이지 상단 사이의 거리 offsetTop 사이의 관계를 파악한 후 제목의 위치를 ​​설정하는 것입니다. = 고정. 여기서는 scrollTop 및 offsetTop 속성의 의미를 이해해야 합니다.

scrollTop

은 스크롤 막대가 있을 때 스크롤 막대가 아래로 스크롤되는 거리를 나타냅니다. 이는 요소 상단의 차단된 부분의 높이입니다. scrollTop==0은 스크롤 막대가 없으면 항상 true입니다. 단위는 px이며 읽기 가능하고 설정 가능합니다.

offsetTop

현재 요소의 상단과 가장 가까운 상위 요소의 상단 사이의 거리는 스크롤 막대의 유무와 관련이 없습니다. 단위 px, 읽기 전용 요소입니다.

scrollTop>offsetTop일 때 제목의 위치는 고정, 상단은 0이므로, scrollTop < offsetTop일 때 위치가 고정되면 코드는 다음과 같습니다.

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

효과는 다음과 같습니다.

Optimization

사진을 보면 기본적인 기능은 거의 구현된 모습인데 뭔가 이상한 느낌이 듭니다. 페이지가 위로 슬라이드되면 효과는 비교적 자연스러워지지만, 페이지가 아래로 슬라이드되면 페이지가 완전히 위로 슬라이드되어야만 제목이 원래 위치로 돌아가므로 위치가 지나치게 부자연스럽습니다. 제목은 두 가지 상황, 즉 위아래로 슬라이딩하여 설정해야 합니다.

상하 슬라이딩 방향을 결정하려면

상하 슬라이딩 방향을 결정하려면 여기를 클릭하세요

페이지가 위로 슬라이드될 때

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 밀리초 내에 한 번만 함수를 실행할 수 있으며, 마지막 함수 실행 이후 지정한 시간 간격이 경과한 경우에만 다음 함수 호출이 이루어질 수 있습니다. 코드는 다음과 같습니다

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

위 내용은 HTML5 제목 천장 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!