초보 코더입니다.^^;;
사이트 왼쪽에 위치 할 퀵메뉴를 코딩해야 합니다.
하단으로 스크롤시 퀵메뉴도 같이 따라서 움직이는 소스를 아래와 같이 찾았습니다.
내용 중 빨간색 부분은 페이지 상단에서 아래로 260px정도 마우스 스크롤 하며 내렸을때부터 퀵메뉴를 움직이라는 명령인거 같은데,
그럼 반대로 퀵메뉴가 사이트 하단에 닿기 전에 일정 위치에서 멈추게하는 방법이 있을까요?
고수님들의 조언 부탁드립니다.
$(function(){
});
if($(this).scrollTop() > 260){
$("#floating_sub2").css({ "position": "fixed", "top": "20px" });
}else{
$("#floating_sub2").css({ "position": "absolute", "top": "280px" });
}
});
});
댓글 3개
kiplayer
11년 전
퀵메뉴가 하단에 닿기 전이라고 하면 퀵메뉴 높이를 알아야 할것 같은데요.
그래야 언제 멈춰야 하는지 알수 있을것 같은데요. ㅎㅎ
사이트를 보여주셔야 할것 같은데요. ㅎ
그래야 언제 멈춰야 하는지 알수 있을것 같은데요. ㅎㅎ
사이트를 보여주셔야 할것 같은데요. ㅎ
HackYa
11년 전
위 jQuery 는 문서 최상단에서 260px 이상 간격이 벌어지면 positon: fixed 가 적용되고 (위 마진 20px 도 잡고: 그러니까 결국 280px), 아니면 position: absolute 으로 잡히게 되어 있습니다. 280px 만큼의 아래로 간격이 떨어진 자리에.
그래서 항상 저 메뉴가 사용자 관점에서 보면 상단에서 280px 내려온 자리에서 보이게 되어 있네요. 같이 따라다닌다는게 무슨뜻인지 정확히 이해가 안되서 코드보고 무슨뜻인지 이해를 한. ㅎㅎㅎ
따라다니는 메뉴가 아니라, 고정 메뉴라고 하시는게 맞을 것 같은데... 그리고 저 코드만 봐서는 그냥 고정된 메뉴인데요? 스크롤 위치에 상관없이 항상 그 자리에 머무르는.... 그래서 저걸 왜 jQuery 로 작성했는지 조차 이해하기가 어렵네요. 그냥 css 만으로도 같은 효과를 줄수 있는건데...
질문에 대한 답변: 스크롤이 바닥에 가까워지면 바닥과 거리계산하셔서 고정된 position 의 element 를 position: relative 로 바꿔주세요.
jQuery 는 scrollTop 은 있는데, scroll바닥 은 없습니다. 그래서
if($(this).scroll바닥() < 100){ 이런식으로 작성하실 수 없고,
var 바닥 = $(window).scrollTop() + $(window).height(); 이런식으로 바닥 거리를 계산하셔서 하시면 됩니다.
scrollBottom, 훔.. jQuery 에 이게 있으면 참 좋을텐데, 이상하게 없더라구요.
그래서 항상 저 메뉴가 사용자 관점에서 보면 상단에서 280px 내려온 자리에서 보이게 되어 있네요. 같이 따라다닌다는게 무슨뜻인지 정확히 이해가 안되서 코드보고 무슨뜻인지 이해를 한. ㅎㅎㅎ
따라다니는 메뉴가 아니라, 고정 메뉴라고 하시는게 맞을 것 같은데... 그리고 저 코드만 봐서는 그냥 고정된 메뉴인데요? 스크롤 위치에 상관없이 항상 그 자리에 머무르는.... 그래서 저걸 왜 jQuery 로 작성했는지 조차 이해하기가 어렵네요. 그냥 css 만으로도 같은 효과를 줄수 있는건데...
질문에 대한 답변: 스크롤이 바닥에 가까워지면 바닥과 거리계산하셔서 고정된 position 의 element 를 position: relative 로 바꿔주세요.
jQuery 는 scrollTop 은 있는데, scroll바닥 은 없습니다. 그래서
if($(this).scroll바닥() < 100){ 이런식으로 작성하실 수 없고,
var 바닥 = $(window).scrollTop() + $(window).height(); 이런식으로 바닥 거리를 계산하셔서 하시면 됩니다.
scrollBottom, 훔.. jQuery 에 이게 있으면 참 좋을텐데, 이상하게 없더라구요.
dethos79
11년 전
맞아요...jquery가 있으면 좋을텐데요.. 친절한 답변 감사드립니다. 일러주신 내용 대로 함 적용해보겠습니다.^^
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 7130 | 11년 전 | 2299 | ||
| 7129 | 11년 전 | 699 | ||
| 7128 |
senseme
|
11년 전 | 1272 | |
| 7127 | 11년 전 | 1152 | ||
| 7126 | 11년 전 | 800 | ||
| 7125 | 11년 전 | 2937 | ||
| 7124 | 11년 전 | 1412 | ||
| 7123 |
잘살아보자
|
11년 전 | 1270 | |
| 7122 |
잘살아보자
|
11년 전 | 666 | |
| 7121 |
잘살아보자
|
11년 전 | 3014 | |
| 7120 |
잘살아보자
|
11년 전 | 2892 | |
| 7119 |
잘살아보자
|
11년 전 | 720 | |
| 7118 |
잘살아보자
|
11년 전 | 3421 | |
| 7117 |
잘살아보자
|
11년 전 | 840 | |
| 7116 | 11년 전 | 726 | ||
| 7115 | 11년 전 | 1015 | ||
| 7114 | 11년 전 | 822 | ||
| 7113 | 11년 전 | 639 | ||
| 7112 | 11년 전 | 1059 | ||
| 7111 | 11년 전 | 1779 | ||
| 7110 | 11년 전 | 1018 | ||
| 7109 |
버섯먹은나
|
11년 전 | 780 | |
| 7108 | 11년 전 | 613 | ||
| 7107 | 11년 전 | 2392 | ||
| 7106 | 11년 전 | 1943 | ||
| 7105 | 11년 전 | 2474 | ||
| 7104 | 11년 전 | 1405 | ||
| 7103 |
 돼지코구뇽 |
11년 전 | 2681 | |
| 7102 | 11년 전 | 3104 | ||
| 7101 | 11년 전 | 4429 | ||
| 7100 | 11년 전 | 5779 | ||
| 7099 | 11년 전 | 2122 | ||
| 7098 | 11년 전 | 1702 | ||
| 7097 | 11년 전 | 1438 | ||
| 7096 | 11년 전 | 1113 | ||
| 7095 |
잘살아보자
|
11년 전 | 849 | |
| 7094 |
잘살아보자
|
11년 전 | 1038 | |
| 7093 |
잘살아보자
|
11년 전 | 917 | |
| 7092 |
잘살아보자
|
11년 전 | 1403 | |
| 7091 |
잘살아보자
|
11년 전 | 2198 | |
| 7090 |
잘살아보자
|
11년 전 | 868 | |
| 7089 | 11년 전 | 1049 | ||
| 7088 | 11년 전 | 1700 | ||
| 7087 | 11년 전 | 1394 | ||
| 7086 | 11년 전 | 1292 | ||
| 7085 |
 Terrorboy |
11년 전 | 1217 | |
| 7084 | 11년 전 | 1136 | ||
| 7083 | 11년 전 | 3486 | ||
| 7082 | 11년 전 | 1127 | ||
| 7081 | 11년 전 | 1727 | ||
| 7080 | 11년 전 | 2005 | ||
| 7079 | 11년 전 | 1304 | ||
| 7078 | 11년 전 | 1287 | ||
| 7077 | 11년 전 | 1284 | ||
| 7076 | 11년 전 | 744 | ||
| 7075 | 11년 전 | 1145 | ||
| 7074 |
네이비칼라
|
11년 전 | 1492 | |
| 7073 | 11년 전 | 1462 | ||
| 7072 |
 ascii |
11년 전 | 824 | |
| 7071 | 11년 전 | 1177 | ||
| 7070 | 11년 전 | 927 | ||
| 7069 | 11년 전 | 1686 | ||
| 7068 | 11년 전 | 1330 | ||
| 7067 |
TPSint
|
11년 전 | 713 | |
| 7066 | 11년 전 | 2144 | ||
| 7065 | 11년 전 | 6627 | ||
| 7064 | 11년 전 | 1281 | ||
| 7063 | 11년 전 | 1128 | ||
| 7062 | 11년 전 | 1060 | ||
| 7061 | 11년 전 | 900 | ||
| 7060 | 11년 전 | 1444 | ||
| 7059 | 11년 전 | 845 | ||
| 7058 |
EngineMan
|
11년 전 | 3388 | |
| 7057 | 11년 전 | 1235 | ||
| 7056 | 11년 전 | 1629 | ||
| 7055 | 11년 전 | 1000 | ||
| 7054 | 11년 전 | 2639 | ||
| 7053 |
네이비칼라
|
11년 전 | 1273 | |
| 7052 | 11년 전 | 2564 | ||
| 7051 | 11년 전 | 1929 | ||
| 7050 | 11년 전 | 2442 | ||
| 7049 | 11년 전 | 1388 | ||
| 7048 | 11년 전 | 2518 | ||
| 7047 | 11년 전 | 1333 | ||
| 7046 | 11년 전 | 1019 | ||
| 7045 | 11년 전 | 1041 | ||
| 7044 | 11년 전 | 5427 | ||
| 7043 | 11년 전 | 1215 | ||
| 7042 | 11년 전 | 775 | ||
| 7041 |
열라뽕똬이
|
11년 전 | 747 | |
| 7040 | 11년 전 | 1096 | ||
| 7039 | 11년 전 | 1448 | ||
| 7038 | 11년 전 | 1860 | ||
| 7037 | 11년 전 | 2166 | ||
| 7036 | 11년 전 | 1079 | ||
| 7035 | 11년 전 | 1398 | ||
| 7034 | 11년 전 | 1337 | ||
| 7033 |
열라뽕똬이
|
11년 전 | 986 | |
| 7032 | 11년 전 | 748 | ||
| 7031 | 11년 전 | 2174 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기