스티커 탐색 모음 스크롤 한 후 제대로

Question

나는 페이지 상단의 네비게이션 바 스틱을 만들기 위해이 코드를 사용하고 작동하지 않습니다

var nav=$('body'); 
var scrolled=false; 
    $(window).scroll(function(){ 
     if(175<$(window).scrollTop()&&!scrolled){ 
      nav.addClass('stuck'); 
      $('.navigation-class').animate({marginTop:80},1000); 
      scrolled=true; 
     } 
     if(175>$(window).scrollTop()&&scrolled){ 
      $('.navigation-class').animate({marginTop:0},0,function(){nav.removeClass('stuck');$('.navigation-class').removeAttr('style');}); 
      scrolled=false; 
     } 
    }); 

문제는 최대 사용자가 스크롤하면 페이지입니다 그리고 빠르게 내리고, 네비게이션은 여전히 ​​움직입니다. 애니메이션을 계속하고 갑자기 점프하여 디자인 된 위치로 이동하면 메뉴에 딸꾹질 효과가 생깁니다.

실시간으로보기 위해 this page을 빨리 돌리십시오.

다른 웹 사이트처럼 원활하게 실행할 수 있습니까?

감사합니다.

Answer 1

편집 : 질문을 다시 읽은 후 사용자가 175px 이상으로 뒤로 스크롤 할 때 애니메이션을 취소하지 않는 것이 문제라는 것을 깨달았습니다.

아마 위치를 적용하고 있습니다 : nav 요소로 이동 하시겠습니까? 사용자가 스크롤 업하는 즉시 float을 제거 하시겠습니까?

대기열 옵션을 false (https://api.jquery.com/animate/ 참조)로 설정하여 애니메이션이 다른 대기열을 완료 할 때까지 기다리지 마십시오.

아마도 JQuery 애니메이션을 제거하고 CSS 전환으로 교체 할 수 있을까요?

---

어쩌면 이렇게 될까요?

var nav=$('body'); 
var scrolled=false; 
var scrollToggle = function(){ 
     $(window).off('scroll'); 
     if(175<$(window).scrollTop()&&!scrolled){ 
      nav.addClass('stuck'); 
      $('.navigation-class').animate({marginTop:80},1000, function() { 
       $(window).on('scroll', scrollToggle); 
      ); 
      scrolled=true; 
     } 
     else if(175>$(window).scrollTop()&&scrolled){ 
      $('.navigation-class').animate({marginTop:0},0,function({ 
       nav.removeClass('stuck'); 
       $('.navigation-class').removeAttr('style'); 
       $(window).on('scroll', scrollToggle); 
      }); 
      scrolled=false; 
     } 
}; 

$(window).on('scroll', scrollToggle); 

나는 WIP에서 비슷한 것을 가지고있다. 조금만 편집하면 여기에 게시됩니다. 아마 유용 할 수 있습니다.

var headerFloat = function() { 
      //Header 
     var pageHeader = $('#pageHeader'), pos = '', 
      headerMain = $('#headerMain'), headerMainHeight = '', 
      content = $('#content'), contentPadding = '', 
      pageTitle = $('h1.currentPage'), pageTitleTop = ''; 

     if($(window).scrollTop() >= 95) { 
      pos = "fixed"; 
      headerMainHeight = '75px'; 
      contentPadding = '225px'; 
      pageTitleTop = '55px'; 
      contentHeaderTop = '130px'; 
     } 

     //Header 
     pageHeader.css('position', pos); 
     headerMain.css('height', headerMainHeight); 
     content.css('padding-top', contentPadding); 
     pageTitle.css({ 'transition': 'all 0s', 'position': pos, 'top': pageTitleTop }); 
     pageTitle[0].offsetHeight; //force "reflow" of element -- stackoverflow.com/questions/11131875/#16575811 
     pageTitle.css('transition', ''); 
    }; 

$(document).ready(function() { 
    /* *** SCROLL -> FLOAT HEADER *** */ 
    $(window).on("scroll.float", headerFloat); 

}); 

''(빈 문자열)을 JQuery CSS 함수에 입력하면 원래 값으로 재설정됩니다. .removeAttr ('style') 대신이 작업을 수행해야합니다. 나는 또한 스크롤 된 부울을 피할 것이다. 어쨌든 당신이 그것을 필요로한다고 생각한다면, scrollTop < 175, 당신은 결코 스크롤되지 않을 것이며, 그 반대도 마찬가지입니다.