점프 헤더

Question

I 페이지의 상단에 스트랩 메뉴를 고정해야하고 asbolutely 위치 스크롤 버튼 (# 홈 슬라이드에) 표시 영역의 하단을 .btn 탐색

. (임의의) 스크롤에서 고정 메뉴가 투명에서 반투명으로 배경을 변경하고 스크롤 버튼이 사라지도록하고 싶습니다. 버튼은 지금부터 숨겨져 있어야하지만 맨 위로 스크롤하면 메뉴가 다시 투명 해집니다.

이 목적으로 jQuery Waypoints를 사용하고 있습니다. 다음 두 코드를 사용하여 효과를 얻었지만 스크롤 할 때 메뉴가 점프합니다., 편집 :메뉴가 항상 고정 된 위치에 있지 않은 것처럼 더 자세하게 깜박입니다. 스크롤 할 때 메뉴가 페이지와 함께 밖으로 스크롤 한 다음 갑자기 고정 된 위치로 다시 이동하는 것처럼 보일 때가 있습니다. 때로는 잠시 후 올바르게 작동하기 시작합니다. 다음 두 줄의 코드를 제거하면 점프하지 않지만 두 이벤트에 대해 동일한 트리거가 필요합니다.

EDIT2 : 메뉴와 함께 중간 점을 사용하지 않으면 깜박이지 않습니다. 스크롤은 매끄럽고 메뉴는 항상 페이지의 다른 모든 요소의 꼭대기에 있습니다.

$("#home-slide .btn-navigate").removeClass("pulse animated"); 
$("#home-slide .btn-navigate").addClass("fadeOutUp animated2"); 

HTML :

<header id="masthead"> 
    <nav class="navbar navbar-fixed-top"> 
     <div class="container"> 
      MENU CONTENT 
     </div> 
    </nav> 
</header> 
<section id="home-slide"> 
    <div class="container"> 
     <h1 class="heading">HEADING</h1> 
     <p class="font2"> 
      TEXT</p>  
     <a href="#" class="btn-navigate animated pulse">Scroll Button</a> 
    </div> 
</section> 

jQuery를 :

jQuery(document).ready(function ($) { 
    $(function() { 
     $("#masthead nav").waypoint(function() { 
      $("#masthead nav").toggleClass('scrolling'); 
      $("#home-slide .btn-navigate").removeClass("pulse animated"); 
      $("#home-slide .btn-navigate").addClass("fadeOutUp animated2"); 
     }, { offset: '-20px' });   
    }); 
}); 

MY 탐색 CSS :

#masthead { 

    nav { 
     min-height: 120px; 
     padding-top: 2.727rem; 
     background: rgba(51,58,64,0.0); 
     -webkit-transition: background-color 0.5s linear; 

     .container { 
      position: relative; 
     } 

     .navbar-nav { 
      a { 
       color: @lms-white; 
       font-weight: bold; 
       text-transform: none; 
       text-shadow: 1px 1px 2px rgba(50, 50, 50, 1); 
       padding: 7px 1.17rem; 
       border: 2px solid transparent; 
       .border-radius(5px); 

       &:hover { 
        background: transparent; 
        border: 2px solid @lms-pink; 
       } 
      } 
     } 

     .navbar-brand { 
      padding: 7px 15px; 
     } 

     &.scrolling { 
      background: rgba(51,58,64,0.9); 
      -webkit-transition: background-color 0.5s linear; 
     } 
    } 

부트 스트랩 탐색 CSS :

.navbar-fixed-top { 
    top: 0; 
    border-width: 0 0 1px; 
} 

.navbar-fixed-top, .navbar-fixed-bottom { 
    position: fixed; 
    right: 0; 
    left: 0; 
    z-index: 1030; 
} 

.navbar { 
    position: relative; 
    min-height: 50px; 
    margin-bottom: 20px; 
    border: 1px solid transparent; 
} 

어떤 생각이 어떻게이 문제를 해결하기 위해? 고맙습니다!

Answer 1

해결책을 찾았습니다.깜박 거리는 것은 Waypoints에 의한 것이 아닙니다. 추가 중

-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */ 
backface-visibility: hidden; 

nav 님이 문제를 해결했습니다.

Answer 2

debugging guide에 설명 된대로 고정 위치 요소를 웨이 포인트로 사용하면 시간이 오래 걸릴 수 있습니다. 문서에서 웨이 포인트 요소의 위치 (클라이언트 offsetX/Y)는 트리거 할 위치를 결정하고 위치 요소의 오프셋은 스크롤 할 때 계속 변경됩니다.

nav, #masthead 그 자체 대신 사용할 수있는 정적으로 배치 된 요소가 이미 완벽하게 준비되어있는 것처럼 보입니다. 또한 웨이 포인트가 교차 할 때 사용자가 스크롤하는 direction을보기 위해 코드를 약간 변경하고자 할 수 있습니다. 사용자가 다시 스크롤하면 이러한 애니메이션 상태 중 일부를 실행 취소하려고한다고 생각합니다.

$("#masthead").waypoint(function (direction) { 
    $("#masthead nav").toggleClass('scrolling'); 
    if (direction === 'down') { 
    $("#home-slide .btn-navigate").removeClass("pulse animated"); 
    $("#home-slide .btn-navigate").addClass("fadeOutUp animated2"); 
    } 
    else { 
    $("#home-slide .btn-navigate").addClass("pulse animated"); 
    $("#home-slide .btn-navigate").removeClass("fadeOutUp animated2"); 
    } 
}, { offset: -20 }); 

이

은 부울 true 경우 토글 클래스를 추가 할 것이다 두 번째 인수로서 부울 걸리는 toggleClass 변화를 이용하여 약간 감소 될 수 있고, 그것은 false 경우 클래스는 제거된다.

$("#masthead").waypoint(function (direction) { 
    $("#masthead nav").toggleClass('scrolling', direction === 'down'); 
    $("#home-slide .btn-navigate") 
    .toggleClass("pulse animated", direction === 'up') 
    .toggleClass("fadeOutUp animated2", direction === 'down'); 
    } 
}, { offset: -20 });