jquery의 한 방향으로 메뉴 고정하기

Question

사용자가 스크롤 할 때 페이지 아래로 스크롤바를 따라갈 웹 사이트의 왼쪽에 "고정 된"메뉴 막대가 있습니다. 이 수직 스크롤에 좋은 작품,

#leftframe { 
position:fixed; 
width: 200; 
} 

일반적으로 :

1) 내 첫 번째 시도는 CSS 스타일 고정을 사용했다 : 나는 두 가지 방법 지금까지 한 CSS, 하나의 jQuery를 시도했습니다. 이 솔루션의 문제점은 창이 너무 넓지 않아 사용자가 스크롤하려고하면 페이지 내용 위로 이동한다는 것입니다.

2) 몇 가지 조사 후, 여기 스택 오버 플로우에 설명 된대로, 한 방향으로 요소를 고정 할 수있는 JQuery와 접근 방식이 있다고 발견이 설명 된 방법을 사용 CSS: fixed position on x-axis but not y?

,이 좋은 쓴

function float_vertical_scroll(id) { 
    $(window).scroll(function(){ 
     $(id).css({ 
      'top': $(this).scrollTop() //Use it later 
     }); 
    }); 
} 

만, 이제 문제는 내가 크롬과 사파리에서 이것을 시도했다, 그리고 모두 수직 스크롤 동안 메뉴 표시 줄의 눈에 띄는 깜박임을 보여 작은 기능은 나를 위해 그것을 할 수 있습니다. 메뉴가 매우 고르지 않게 바뀌어 CSS 솔루션이 페이지 아래로 부드럽게 밀어 넣습니다.

jquery 솔루션이 고르지 않은 이유를 아는 사람이 있습니까? 나에게 "두 세계의 최고"를 줄 수있는 세 번째 해결책이 있습니까?

모두에게 감사드립니다.

Answer 1

저는이 문제에 대한 훌륭한 해결책을 생각해 냈습니다. 그래서 다른 사람들이 뭔가를 찾고있는 경우에 대비해 여기에 게시 할 것입니다.

요약하자면, 왼쪽 메뉴가 세로로 고정되기를 원했기 때문에 세로 스크롤을 따르지만 가로로 고정되지 않았습니다. CSS는 양방향으로의 수정 만 허용합니다. 따라서 CSS 솔루션을 사용하면 창 크기가 작을 때 가로 스크롤 막대가 나타나고, 사용하면 페이지가 페이지 내용 위에 떠있게됩니다.

초기 질문에서 또 다른 해결책으로 제시 한 float_vertical_scroll 함수는 수직 스크롤시 자바 스크립트가 너무 느리게 새로 고침되어 메뉴 막대가 고르지 않고 고르지 못한 방식으로 움직이는 단점이있었습니다. 이 솔루션은 절대 위치를 설정하고 jquery를 사용하여 모든 스크롤 이벤트에서 메뉴를 아래로 이동했습니다.

대부분의 페이지에서 사이드 바 메뉴에 관한 것은 스크롤의 99 %가 수직이라는 것입니다. 수평이 거의 없습니다. 그래서 저는 가로 스크롤이 고르지 않게 만들고 세로 스크롤을 부드럽게 만들 수 있다면 어떨까요?

아래 해결 방법이 있습니다. 프레임을 절대로 설정하고 자바 스크립트에서 세로로 스크롤하는 대신 고정으로 설정하고 가로 스크롤에서 오프셋을 반전했습니다. 이렇게하면 수평 스크롤이 취소됩니다. 수평 스크롤은 약간 불안해 할 수도 있지만 거의 사용하지 있기 때문에 아무도 정말 관심이 없다 : 당신이 요소를 업데이트 할 수 있습니다 빠른 자바 스크립트보다 더 스크롤 때문에

function float_horizontal_scroll(id) { 
    jQuery(window).scroll(function(){ 
     jQuery(id).css({ 
      'left': 0 - jQuery(this).scrollLeft() 
     }); 
    }); 
} 

#leftframe { 
position:fixed; 
width: 200; 
}