Skip to content
On this page

제이쿼리 플로팅 메뉴 만들기

설명 :

플로팅 메뉴는 따라다니는 메뉴를 말한다.

html
<html>
<head>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="jquery.scrollfollow.js"></script>
      
    <script>
        $(document).ready(function(){
            $("#testbanner").scrollFollow({
                speed : 800,    // 꿈지럭 거리는 속도
                offset : 200     // 웹페이지 상단에서 부터의 거리(바꿔보면 뭔지 안다)
            });
        });
    </script>
      
    <style>
        #testbanner{
            position: absolute;
            border: 3px solid #f00;
  
            left : 100px;
            top : 30px;
            width: 150px;
            height: 300px;
        }
    </style>
</head>
  
<body>
    <div id="testbanner">
        봉봉 배너 테스트
 
        <a href="/">홈으로</a>
    </div>
</body>
</html>
html
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="jquery.scrollfollow.js"></script>
      
<script>
    $(document).ready(function(){
        $("#testbanner").scrollFollow({
            easing : "easeInOutBack"
        });
    });
</script>

참고 자료 :

https://stove99.tistory.com/124