quick메뉴/follow메뉴/floating메뉴 만들기

[html]

<div id="floatingMenu">

 퀵메뉴 내용

</div>

 

* id로 해도 되고, class로 해도 되고 따라다닐 div 만들기

 

[css]

position:absolute;

왼쪽에 붙일 건지, 오른쪽에 붙일 건지 결정하고 정렬

본문의 오른쪽에서 따라다닐 경우,

본문 컨텐츠 최대 넓이값(ex. 1000px 기준)의 가운데로 퀵메뉴 정렬

right: calc(50% - 퀵메뉴 넓이/2)

오른쪽 기준으로 50% 보낸 상태에서 - 컨텐츠의 최대 넓이/2 + 퀵메뉴 넓이값

margin-right = 1000/2 + 퀵메뉴넓이 + 본문하고 떨어질만큼 넓이

 

최대넓이값이 되었을 때 안보이게 하려면 미디어쿼리로 display:none 처리하고

브라우져 항상 오른쪽에 위치하고 싶다면 컨텐츠의 최대 넓이값에 미디어쿼리로 right: 0

 

[scrpt]

<script>

    //floatingMenu

    $(window).scroll(function(){

        var scrollTop = $(document).scrollTop();

        if (scrollTop < 180) {

            scrollTop = 180;

        }

        $("#floatingMenu").stop();

        $("#floatingMenu").animate( { "top" : scrollTop });

    });

</script>