Teach you step by step how to achieve the ceiling effect of the front end

The front end realizes the ceiling effect

1. Monitor the scroll event and realize the ceiling function

2. CSS to achieve ceiling

We often encounter this requirement when writing pages: the initial position of the navigation menu is not at the head. When the page is slid, the navigation menu slides to the head. The position is fixed on the head, and the navigation menu returns to the original position when you slide down.

The height/width of the rolled-up webpage(i.e. the height of the page content hidden after the browser scroll bar is scrolled)

(javascript)        document.documentElement.scrollTop //firefox

(javascript)        document.documentElement.scrollLeft //firefox

(javascript)        document.body.scrollTop //IE

(javascript)        document.body.scrollLeft //IE

(jqurey)             $(window).scrollTop() 

(jqurey)             $(window).scrollLeft()

Working area of ​​the webpage The height and width

(javascript)       document.documentElement.clientHeight// IE firefox       

(jqurey)             $(window).height()

The offset value of the element from the top and left side of the document

(javascript)        DOM元素对象.offsetTop //IE firefox

(javascript)        DOM元素对象.offsetLeft //IE firefox

(jqurey)             jq对象.offset().top

(jqurey)             jq对象.offset().left

Get the distance between the page element and the top of the browser workspace Distance

The distance between the page element and the top of the browser working area = The offset value of the element from the top of the document - The height of the rolled up web page

That is:

The distance between the page element and the top of the browser workspace = DOM element object.offsetTop - document.documentElement.scrollTop

1. Listen to the scroll event and implement the ceiling function

window.addEventListener("scroll",()=>{
	let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;  
    let offsetTop = document.querySelector('#searchBar').offsetTop;
    if (scrollTop > offsetTop) {
         document.querySelector('#searchBar').style.position="fixed";
         document.querySelector('#searchBar').style.top="0";
    } else {
         document.querySelector('#searchBar').style.position="";
         document.querySelector('#searchBar').style.top="";
    }})

2. CSS to achieve ceiling

position: sticky;
top:0

Copy after login

Thank you all for reading, I hope you will benefit a lot

This article is reproduced from: https ://blog.csdn.net/zqyzqy22/article/details/90634702

Recommended tutorial: "JS Tutorial"

The above is the detailed content of Teach you step by step how to achieve the ceiling effect of the front end. For more information, please follow other related articles on the PHP Chinese website!