2012-07-04 3 views
0

가로 스크롤링 사이트를 만들고 있습니다. 메뉴 링크를 클릭 할 때마다 scrollto를 사용하여 선택한 섹션으로 스크롤하지만 링크가 아닌 스크롤을 사용하여 섹션으로 스크롤하면 nav 스타일이 엉망이됩니다. 문제는 내가 스크롤 이벤트에 스크롤 코드를 가지고 스크롤 이벤트를 발생시키는 것입니다. 1) 내가 3) 내가 다음/이전이scrollto jquery plugin을 사용할 때 scroll 이벤트를 바인드/언 바인드해야합니까?

링크를 클릭 2) 수동으로 브라우저 스크롤바가있는 섹션으로 스크롤 그것을 클릭 :

은 무엇 내가 달성하고자하는 경우 탐색 메뉴에서 현재 링크를 강조하다

은 어쩌면 문제는이 부분에 있습니다

var position = Math.abs($('#slider ul').offset().left - 138); 
$('p.status').html('index:' + getCurrentSectionIndex(position)); 

//disable the scroll event so it doesn't broke the flow 
$('#slider').unbind('scroll',handler); 

//scrolls to the selected section 
$('#slider').scrollTo($('#' + $(this).attr('class')), 800, { axis: 'x' }); 

//enable again the scroll event 
//$('#slider').bind('scroll',handler); 
var timeout = setTimeout(function() { 
    $('#slider').bind('scroll',handler); 
}, 3000); 

당신이 개선 될 수있는 모든 일을 보는 경우에, 조언을 환영합니다 :)

me.Any을 알려주세요 그래서 나는 JQuery와 새로운 해요 나는 돈이 없다. 코드의 간단한 '버전'은 t 내가이 잘 설명 한 경우이 코드 jsfiddle

나는이 question

답변

0

음의 코드의 일부를 사용하고는 그래서는 않았다 알고 ', 그리고 네가 원하는대로 일하는 것 같아.

Click here to see the jsfiddle live demo

업데이트의 일부를

은 다음과 같습니다

변수 index 현재 항목의 인덱스를 받으면에.

index에 따르면, 해당 항목은 eq:() 선택기를 사용하여 강조 표시되며이 동일한 방법을 사용하여 페이지를 스크롤합니다.

그리고 메신저 플러그인을 다시 스크롤 이벤트를 바인딩 할 ScrollTo의 콜백 (onAfter)를 사용하여 :

$('#slider').scrollTo('ul li:eq(' + index + ')', 800, { 
    axis: 'x', 
    onAfter: function() { 
     $('#slider').bind('scroll', handler); 
    } 
}); 

을 나는 의심의 처분이다!

+0

예! 작동합니다. 너무 간단! 나는 여전히 문제가 있습니다. 링크 번호 6이 강조 표시되지 않고 why.And 오류로 인해 다음/이전 버튼이 실패합니다. – Oterox

+0

@Oterox : 숫자 6의 왼쪽 오프셋은 스크롤 div의 왼쪽에 부딪치지 않으므로 예상 한대로 작동하지 않습니다. – void

+0

하지만 메뉴 탐색 링크 6을 클릭하면 스크롤이 잘 돌아가고 패널 # 6의 왼쪽 오프셋이 스크롤 div ¿의 왼쪽에 닿아 있습니까? – Oterox