스크롤 가능한 메뉴 트래킹 문제

Question

나는 작동하는 스크롤 방법을 이해하고 시도하는 데 많은 시간을 할애하고 있습니다.

목표 : 큰 사진 뷰어/갤러리를 만드십시오. 사용자는 이미지를 탐색하기 위해 토글 메뉴에서 화살표 키 또는 축소판을 클릭합니다. 갤러리와 메뉴는 사용자가보고있는 축소판을 추적해야합니다.

상황 : 마우스가 창의 오른쪽 가장자리 위로 움직일 때 표시되도록 슬라이드하는 위치 : 절대 # 메뉴가 있습니다. 이 #menu에는 오버플로 : 스크롤이있는 하위 #galleryMenu가 있습니다. 결과는 스크롤 휠을 사용하여 탐색 할 수있는 스크롤 가능한 메뉴입니다.

문제점 : 마우스가 # 메뉴에서 벗어날 때마다 사용자가 장소를 잃어 버립니다. 나는 사용자가 중단 한 곳에서 #menu를 유지하는 방법을 모른다.

샘플 웹 사이트 링크 : http://bahaha.ga/?view=0

는 또한 몇 가지 플러그인을 시도했습니다,하지만 그들은 # galleryMenu의 오버 플로우를 취소 : 스크롤이 전체 #menu 유적.

도움을 주시면 감사하겠습니다.

다음은 목표/문제를 전달하는 데 도움이되는 더 간단하고 정리 된 코드입니다.

HTML

<div id="resolution"> 
    <div id="main"> 
     <img /> 
    </div> 
    <div id="menu"> 
     <div id="galleryMenu"> 
      <ul id="galleryThumbnail"> 
       <li></li> 
       <li></li> 
       <li></li> 
       <li></li> 
       <li></li> 
       <li></li> 
       <li></li> 
       <li></li> 
       <li></li> 
       <li></li> 
      </ul> 
     </div> 
    </div> 
</div> 

CSS

#resolution{ 
    position: absolute; 
    margin:0; 
    padding:0; 
    width: 100%; 
    height: 100%; 
} 

#main{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
} 

#menu{ 
    position: absolute; 
    display: block; 
    cursor: pointer; 
    right: 0; 
    width: 10px; 
} 

#galleryMenu{ 
    position: absolute; 
    display: none; 
    width: 350px; 
    right: 0; 
    overflow: scroll; 
} 

#galleryThumbnail{ 
    list-style-type: none; 
    padding: 20px 0 20px 0; 
    margin: 0; 
} 
#galleryThumbnail li{ 
    padding: 0; 
    margin: 0; 
} 

JQUERY이 필요

//Show and Hide Gallery Menu 
$("#menu").hover(function(){ 
    $("#galleryMenu").show('slide', {direction: 'right'}, 500);} , function(){ 
    $("#galleryMenu").hide('slide', {direction: 'right'}, 500);} 
); 

//Set Window Height as Menu Heights 
$("#menu").height($(window).height()); 
$("#galleryMenu").height($(window).height()); 

// Scroll to Current Thumbnail on Menu 
$("#galleryMenu").animate({ 
    scrollTop: $(document).height()-$(window).height()}, 
    1400, 
    "easeOutQuint" 
); 

Answer 1

내가 해결 방법을 찾아 관리하는 데 도움이 바랍니다. Jquery의 slideUp() 및 slideDown()을 사용하면 #menu의 위치가 재설정되었습니다 (마우스가 #menu에서 잠시 후 즉시 해제 됨).

slideUp() 및 slideDown() 대신에 .animate()를 사용하여 화면 오른쪽에서 #menu를 이동했습니다. 이렇게하면 사용자가 일시적으로 멀리 공중제비 한 상태에서 #menu의 스크롤 위치를 쉽게 추적 할 수 있습니다.

Khaleel, 코드 주셔서 감사합니다,하지만 그것은 나를 위해 작동하지 않았다. 그러나, 나는 최대 작동 코드를 얻을 수 있었다 :하여 UL의 LI 요소와 PHP의 작은 비트를 사용

//Menu : Scroll to Thumbnail 
$("#galleryMenu").animate(
    {scrollTop: $("li:nth-child(<?php echo $currentImage ?>)").offset().top-()}, 
    500 
); 

을, 나는의 축소판을 포함 된 리튬 요소의 n 번째의 아이를 잡아 할 수 있었다 현재 #menu에 가운데에 맞춰보기 위해 이미지를 보았습니다.

감사합니다.

Answer 2

.

var tempScrollTop=0; 
$(document).on('scroll', '#galleryMenu', function(){ 
    tempScrollTop = $(#galleryMenu).scrollTop(); 
}); 
$(document).on('hover', '#galleryMenu', function(){ 
    $(#galleryMenu).scrollTop(tempScrollTop); 
}); 

는