Html5 title ceiling function

Ceiling is a relatively common interactive effect. When the page slides out of the screen boundary, the title will automatically be adsorbed on the edge of the screen to remind the user. This article mainly introduces the relevant information of the title ceiling function of Html5. Interested friends can refer to

Ceiling function

Ceiling is a relatively common interactive effect. When the page slides When the title exceeds the edge of the screen, the title will be automatically attached to the edge of the screen to remind the user.

Basic Principle

The basic principle implemented in H5 is to determine the relationship between the sliding distance of the current page scrollTop and the distance between the title and the top of the page offsetTop , and then set the position of the title = fixed. Here you need to understand the meaning of scrollTop and offsetTop attributes.

scrollTop

represents the distance the scroll bar scrolls down when there is a scroll bar, which is the height of the blocked part of the top of the element. scrollTop==0 is always true when there is no scroll bar. The unit is px, readable and settable.

offsetTop

The distance between the top of the current element and the top of the nearest parent element has nothing to do with whether there is a scroll bar or not. Unit px, read-only element.

So, when scrollTop>offsetTop, the title's position = fixed, top = 0, so that it is fixed at the top of the screen; when scrollTop < offsetTop, cancel the position = fixed , the code is as follows:

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

The effect is as follows:

##Optimization

The picture shows that the basic functions are almost implemented, but something feels weird. When the page slides up, the effect is relatively natural. However, when the page slides down, the title will return to its original position only when the page slides completely to the top, causing it to be excessively unnatural. Therefore, the position of the title must be set in two parts. Two situations: sliding up and down.

Judge up and down sliding direction

Judge up and down sliding click here

When the page slides up

When scrollTop>offsetTop , the position of the title = fixed, top = 0, so that it is fixed at the top of the screen;

When the page slides down

When scrollTop

The code is as follows:

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

The effect is as follows:

Optimization of scroll throttling

When the scroll event is monitored on the page, the scroll callback will always be executed when sliding, affecting the page performance and throttling A function is only allowed to be executed once within X milliseconds. The next function call can only be made after the time interval you specify has passed since the last function execution. The code is as follows

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

The above is the detailed content of Html5 title ceiling function. For more information, please follow other related articles on the PHP Chinese website!