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 hereWhen the page slides upWhen 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 downWhen scrollTopif(beforeElementScrollTop - elementScrollTop <=0){//up console.log('up'); if (beforeOffsetTop - elementScrollTop < 0){ fixedDom.addClass("road-tab-fixed") } }else{ console.log('down'); // console.log('beforeOffsetTop-----------',beforeOffsetTop); // console.log('elementScrollTop--------------',elementScrollTop); if (beforeOffsetTop - elementScrollTop >= 0){ fixedDom.removeClass("road-tab-fixed") } }
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 followsconst 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('up'); 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!