1. Premise summary

When the target element exceeds the base element, the header element rises to the top, as shown in figure B, where element B is anchored to the bottom

2

  • Gets the initial distance from the top of elements A and B
  • Gets the scrolling distance
  • It should be understood that the rolling distance is the ascending distance of element A, so when the initial distance of element A minus the ascending distance is less than the initial distance of element B, it means that element A has exceeded element B, and element C is displayed

3. Code demonstration

Main methods: For node acquisition:

  • Uni.createselectorquery ()=> Get the seletorQuery object instance
  • Selectorquery.in (this)=> Indicates that the value of the selector is within the current component => still returns the selectQuery object
  • Selectorquery.select (‘ selector ‘)=> matches the corresponding selector node and returns an instance of the NodesRef object
  • NodesRef. BoundingClientRect (the callback) = > add node location query request, return nodesRef corresponding selectorQuery object
  • Selectorquery.exec ()=> Execute all requests
// Mounted () {const query = uni.createsElectorQuery ().in(this); Query. Select ('#A').boundingClientRect(data=>{console.log(' get layout location information ', json.stringify (data)); Console. log(' distance of node from top of page is ',data.top); this.myScroll = data.top; }).exec(); const query1 = uni.createSelectorQuery().in(this); Query1. select("#B").boundingClientRect(data=>{console.log(' bottom info ', json.stringify (data)); The console. The log (' at the bottom of the top 'data. Top); this.myBottom = data.top; }).exec(); }, // Get onPageScroll(e) {if(this.myscroll -e.scrolltop < this.mybottom) {this.show = true; } else {this.show = false; }}Copy the code

Refer to the link: www.cnblogs.com/lishuang224… Uniapp. Dcloud. IO/API/UI/node…