Learn a jQuery plugin every day - floating menu, for your reference, the specific content is as follows Floating menuThis is another very common effect, using a common feature of the a tag - anchor The effect is as follows Code section <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Floating menu</title> <script src="js/jquery-3.4.1.min.js"></script> <style> *{ margin: 0px; padding: 0px; user-select: none; } .item{ border: 1px solid lightgray; margin: 10px; height: 400px; border-radius: 5px; position: relative; } .head{ background-color: lightgray; height: 30px; display: flex; justify-content: flex-start; align-items: center; text-indent: 10px; position: absolute; top: 0px; width: 100%; } .fbox{ position: fixed; top: 20%; bottom: 20%; right: 20px; width: 150px; border: 1px solid lightgray; background-color: white; border-radius: 5px; } .main{ position: absolute; top: 30px; width: 100%; bottom: 0px; overflow:auto; } .main ul{ margin-left: 30px; } a{ color: gray; } </style> </head> <body> </body> </html> <script> $(document).ready(function(){ //Add test dom and generate test data var arr = []; for(var i = 0;i<50;i++){ var id = 'id'+i; var $dom = $("<div class='item' id='"+id+"'><div class='head'>"+id+"</div></div>"); $dom.appendTo($("body")); arr.push(id); } //Call method $.fmenu(arr); }) $.extend({ fmenu:function(arr){ $(".fbox").remove(); var $fbox = $("<div class='fbox'></div>"); var $head =$("<div class='head'>Floating menu</div>"); var $main = $("<div class='main'></div>"); var $ul = $("<ul class='ul'></ul>") $ul.appendTo($main); $head.appendTo($fbox); $main.appendTo($fbox); $fbox.appendTo($("body")); arr.forEach(item=>{ var $li = $("<li><a href='#"+item+"'>"+item+"</a></li>"); $li.appendTo($ul); }) } }) </script> Explanation of ideas
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Solution to the failure of loading dynamic library when Linux program is running
Syntax format: row_number() over(partition by gro...
MySQL multi-table query (Cartesian product princi...
<style type="text/css"> Copy code ...
The emergence of jQuery has greatly improved our ...
Scenario Yesterday the system automatically backe...
1. Color matching effect preview As shown in the ...
Seurat is a heavyweight R package for single-cell...
This article example shares the specific code of ...
Mysql8.0.12 decompression version installation me...
The functions of the three attributes flex-grow, ...
Table of contents Stabilization Introduction Anti...
>>>>>Ubuntu installation and confi...
Network type after docker installation [root@insu...
Introduction After compiling, installing and solv...
Description: Set a timer to replace the content of...