jQuery - on window 스크롤 지연없이 함수를 실행하십시오.

Question

jquery 함수에 문제가 있습니다. 여기에서 작동하는 데모를 볼 수 있습니다 - http://dev.sreejesh.in/menuissue/. 사용자가 페이지를 스크롤 할 때 볼 수 있듯이 스크롤 픽셀을 검사하기 위해 jQuery 함수 (스크롤 할 때 trigger 함수)를 작성했습니다. 브라우저가 특정 픽셀 (사이드 메뉴 블록 높이)로 스크롤하면 Menu 블록은 고정 된 상태로 계속 콘텐츠의 & 고정 스크롤됩니다.

기능이 작동하지만,이 기능을 실행하면 menublocks가 점프됩니다. 나는 이것이 기능을 실행하는데 지연이 있다고 생각한다. 이 문제를 해결하기위한 멋진 트릭이 있기를 바랍니다.

if/else 함수를 사용하여 스크롤 픽셀을 확인하므로 스크롤 된 픽셀이 menublock 높이보다 클 때 "고정"클래스가 추가됩니다.

다음 코드를 사용합니다. ,

#menubar{ 
    position: fixed; 
} 

그냥 구글 크롬에서 테스트 :

HTML

<div id="globalwrapper"> 
    <div id="menubar"> 
     ---- Menu List items----- 
    </div> 
    <div id="mainblock"> 
     ----Main content area---- 
    </div> 
</div> 

jQuery를

$(document).ready(function(){ 
    $(window).scroll(function() { 
     adjustScroll(); 
    }); 
}); 

function adjustScroll(){ 
    var windowHeight = $(window).height(); 
    var menublockHeight = $('#menubar').height(); 
    var scrollValue = $(document).scrollTop(); 
    var posValue = menublockHeight - windowHeight; 

    var menuStatus = $('#menubar').css('left'); 

    $('#menubar').css('minHeight', windowHeight); 
    $('#menubar').css('height', menublockHeight); 

    console.log(menuStatus); 

    $(document).scroll(function() { 
     if(menuStatus == '0px') { 
      if(scrollValue > posValue){ 
       $('#menubar').addClass('fixed'); 
       $('#menubar').css('marginTop', -posValue); 
      }else { 
       $('#menubar').removeClass('fixed'); 
       $('#menubar').css('marginTop', '0px'); 
      } 
     } 
    }); 
} 

Answer 1

는 난 단지 CSS는이 문제를 해결이 스타일을 추가 할 수 있다고 생각 너는해볼 수있다.