Scroll detection, so that the content in the lower right corner is not displayed at the top of the page, but is displayed as the mouse slides

Download plug-ins

Download the two in the figure js Files are imported into your own project

Then introduce this in the component js

stay mounted Add this part to the hook function of

//  Roll detection 
      var waypoint = new Waypoint({
    
        element: document.getElementById('waypoint'), //  What label does this represent 
        handler: function(direction) {
    
          if (direction == "down"){
     //  Scrolling triggers this function 
            // If you slide the mouse down  ,  Then let id  by  toolbar The label of shows 
            $('#toolbar').show(500);
          }else {
    
            // If you slide the mouse up  ,  Then let id  by  toolbar Label partition of 500 Hide after milliseconds 
            $('#toolbar').hide(500);
          }
          console.log('Scrolled to waypoint!' + direction)
        }
      })

The effect is
Slide to the top, and the content in the following figure disappears
Slide the mouse down , The content in the figure will appear again