로그인

검색

Extra Form
추천지수 6

저희 라이믹스 꿀팁에 헤더메뉴 부분이 스크롤을 조금 내리면 사라지게 해 놓았는데요. 이게 궁금하다고 @adlib 님께서 요청을 하셔서 팁으로 작성을 해 봅니다.

 

rx-flextagram 레이아웃의 경우 

 

header01.png

 

 

PC에서는 저 위쪽이 헤더메뉴이고 모바일에서는 하단에 메뉴가 헤더메뉴 입니다.

 

 

 

 

 

 

header011.png

 

 

모바일에서는 아래에 위치하죠.

 

 

 

 

 

우선 저 헤더메뉴의 클래스명을 확인해 보아야 합니다. 개발자도구에서 쉽게 확인이 가능하죠.

 

.app-header 로 확인이 되네요.

 

그럼 사용하시는 Top Up 스크롤 버튼 소스가 있다면 해당 소스에서  Top 버튼이 나오게 하는 소스에 헤더를 가리는 소스를 추가해 주는 것으로 간단하게 Top 버튼이 나오면 헤더가 가려지게 됩니다. 

 

 

jquery 에서 .fadeOut(100); 은 지정한 곳을 없애주는 기능입니다. 괄호에 숫자 100은 부드럽게 사라지는 시간을 지정하는 것이 적당히 변경해 가면서 사용가능합니다.

 

*****.fadeOut(100);

이렇게 하면 ***** 가 사라지게 되는 것 입니다.

 

 

jquery에서 내가 지정하고 싶은 곳을 class로 선택을 하는 방법은 $('.class_name') 입니다. 클래스가 아닌 엘리먼트 ID로 지정하고 싶다면 $('#id_name') 으로 하면 됩니다. 

 

이번에 할 곳은 class로 지정할 것이니 

$('.app-header')가  작동하게 할 위치이고 거기에 작동하게 할 동작은 fadeOut() 과 fadeIn() 입니다.

 

top 버튼이 나오게 하는 소스에 

$('.app-header')..fadeOut(100); 을 추가로 넣어주고

 

 

반대로 top 버튼이 사라지는 소스에는 

$('.app-header')..fadeIn(100); 넣어주면 되는 아주 간단한 팁입니다.

 

 

 

제가 사용하는 스크롤  Top Up 소스에 추가한 것을 보시면 아주 간단합니다.

 

 

<script type="text/javascript">
//<![CDATA[
(function($){
$(document).ready(function(){
var scrollToTop = function() {
// Get link
var link = $('#scrollUp'); // 제가 사용하는 Top Up 선택자를 link 변수로 선언
var header = $('.app-header'); // 지금 적용하려는 헤더메뉴를  header 변수로 선언
link.hide();
var windowW = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

$(window).scroll(function() {
// If the user scrolled a bit (150 pixels) show the link in large resolutions
if (($(this).scrollTop() > 150)) {
link.fadeIn(100);
header.fadeOut(100); // 스크롤이 지정된 픽셀 아래로 내려오면 헤더가 사라짐
} else {
link.fadeOut(100);
header.fadeIn(100); // 스크롤이 지정된 범위를 벗어나면 다시 헤더가 나타남
}
});
};
scrollToTop();
$("#scrollUp").click(function () {
$("html, body").animate({ scrollTop: 0 }, 0);
});
});
})(jQuery);
//]]>
</script>

 

위와 같이  jquery 를 이용하면 아주 간단하게 화면의 출력되는 것을 쉽게 조작하는게 가능하니 필요한게 있을때 검색을 하면 쉽게 방법을 찾을 수 있습니다.

 

지금 예시로 보여드린 부분은 rx-flextagram 의 메인 헤더메뉴에 해당하는 예시이고 만약 게시글 열람에 나타나는 또다른 헤더부분을 적용하고 싶다면 비슷하게 또 처리를 해야 합니다.

Who's 꿀팁관리소장

profile

라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.

커뮤니티를 운영하면서 필요한 간단한 것을 만들고 공유하고 운영에 필요한 노하우나 기술을 공유합니다.

하지만 따로 의뢰를 받거나 하지 않으니 문의 등을 하실 필요는 없습니다.

Atachment
첨부 '0'

라이믹스 팁(76)

라이믹스 운영과 사용에 관한 팁을 공유 합니다.

  1. read more
  2. read more
  3. Read More
  4. Read More
  5. Read More
  6. Read More
  7. Read More
  8. Read More
  9. Read More
  10. Read More
  11. Read More
  12. Read More
  13. Read More
  14. 라이믹스 회원(팝업)메뉴에 아이콘 추가해주기

    Date2021.05.11 Category기능 Views54 Votes0
    Read More
  15. Read More
  16. Read More
  17. Read More
  18. 신규 회원 가입 사실만 메일로 전달 받고 싶을때

    Date2021.05.06 Category기능 Views45 Votes0
    Read More
  19. Read More
  20. Read More
  21. 스케치북5 스킨 검색어 하이라이트 효과 주기

    Date2021.05.02 Category기능 Views52 Votes0
    Read More
  22. Read More
  23. Read More
  24. 댓글 주소 클립보드에 복사하는 기능 추가하기 10

    Date2021.04.25 Category기능 Views46 Votes0
    Read More
  25. Read More
  26. Read More
  27. Read More
  28. 스케치북 빵조각 '메뉴 아이콘' 적용해 보았습니다.

    Date2021.04.21 Category기능 Views34 Votes0
    Read More
  29. Read More
  30. 본문 게시글 주소 복사 버튼 여러곳에 추가해 주기 17

    Date2021.04.10 Category기능 Views49 Votes0
    Read More
  31. input 입력창 크기가 작거나 이상한가요? css box-sizing

    Date2021.04.09 Category기타 Views43 Votes0
    Read More
  32. 본문 게시글 주소 클립보드 복사 기능 만들기 8

    Date2021.04.06 Category기능 Views73 Votes0
    Read More
Board Pagination Prev 1 2 3 Next
/ 3