positon을 사용하여 스크롤 메뉴 만들기 : 고정;

나는 웹 사이트 (http://www.deayoga.ch/)를 만들고 있는데, 페이지 왼쪽의 메뉴 막대를 만들고 싶습니다. 즉, 페이지에서 그대로 시작되고 사용자가 아래로 스크롤하면 브라우저 창에 상대적으로 고정 된 상태로 유지됩니다. 이 아이디어는 here과 같은 일부 StackOverflow 페이지의 오른쪽에있는 링크에서 가져옵니다.
어떻게이 작업을 수행 할 수 있습니까?

PS : 나는 이미 position: fixed; left: 0;를 사용하여 왼쪽에 고정 사업부의 숙박을 만드는 방법을 알고,하지만 내 질문은 윈도우의 측면에서 거리를 모른 채, 페이지의 중간에이 작업을 수행하는 방법이다 (페이지에 관계없이 창 크기의 중간에 앉아 때문에)positon을 사용하여 스크롤 메뉴 만들기 : 고정;

출처

2011-08-18 Sean Bone

레미 샤프 수행하는 방법에 (비디오) 아주 좋은 튜토리얼을 가지고 정확히 :

http://jqueryfordesigners.com/fixed-floating-elements/

출처

2011-08-18 18:18:39

답변 해 주셔서 감사합니다. 나는 이것이 효과가있을 것이라고 확신한다. 그럼에도 불구하고, 관심 지점과 같이, 사용자가 제 3 자 스크립트없이 (그리고 얼마나 많이) 스크롤 할 때 나는 어떻게 감지합니까? –

이 수학 문제처럼 소리 ... JS를 사용하여 창 크기, 나누기 얻기 중간 점을 구하려면 e를 두 번 누르고 중간 점 값에서 고정 div의 크기의 절반을 뺀 다음 CSS 위치 "left"값을 설정합니다.

position: relative;

메뉴가 중간에 지금 :

출처

2011-08-18 18:27:38

"꼭대기"값을 의미합니다 – rlemon

저는 그가 수평 중심에서와 같이 중간을 의미한다고 생각했습니다. 수직에 대해서도 동일한 기술을 사용할 수 있습니다. –

답변 해 주셔서 대단히 감사합니다. 사실 js를 사용하여 왼쪽 위치를 계산하지 못했기 때문에 CSS에 좀 더 집중했습니다. –

추가이 그런 다음 당신의 #container 클래스에 다음을 추가하면 #leftcol

#leftcol { 
    position: fixed; 
    top: 50%; 
    margin-left: 20px; 
    margin-top: -150px; 
    text-align: center; 
}

지금 가지고있는 클래스 대신에 스타일 시트를 TTO 페이지. 그래도 콘텐츠의 위치를 변경해야 할 수도 있습니다. 다만 여백을 추가하십시오.

출처

2011-08-18 20:04:33 sg3s

시간을내어 대답 해 주셔서 감사합니다. 내 질문에 오해가 생길 수도 있습니다. 요소를 고정하는 방법이 수직이 아닌, 정상적으로 시작하는 방법과 사용자가 아래로 스크롤 할 때만 div _touches _ _ _ _ _ _ _ _ _ _ _ _ _ screen _)은 고정됩니다. 어쨌든 고마워! –

positon을 사용하여 스크롤 메뉴 만들기 : 고정;

답변

관련 문제