728x90
반응형
SMALL
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style type="text/css"> body { height: 2000px; } #quick { position: relative; width: 100px; left: 50%; top: 0; margin-left: 540px; height: auto; z-index: 20; } #quick .quick_menu { margin-top: 25px; } #quick .quick_menu li a { text-align: center; width: 100%; margin: 0 auto; display: block; outline-style: none; text-decoration: none; } </style> <script> $(function(){ var cssTop = parseInt($("#quick").css("top")); $(window).scroll(function() { var position = $(window).scrollTop(); var total = cssTop + position + 200; if(total == 200){ total = 0; } $("#quick").stop().animate({ "top" : total + "px" }, 1000); }); }) </script> </head> <body> <div id="quick"> <ul class="quick_menu"> <li>공지사항</li> <li>자주묻는질문</li> <li>카톡상담</li> <li>상담전화계좌번호</li> </ul> </div> </body> </html> | cs |
728x90
반응형
LIST
