2012-04-10 4 views
1
이 사이트의 유사한 탐색 모음 만들

:특정 위치

http://www.mysupermarket.co.uk/#/shelves/top_offers_in_asda.html

사람이 어떻게 탐색 모음을 만드는 방법을 말해 줄래을, 페이지를 처음으로 로딩 할 때 페이지를 아래로 스크롤 할 때 나를 따라 가면서 따라 다니는 것은 아닌가?

에 액세스 할 때 아래로 스크롤하면 내가하는 말을 이해할 수 있습니다. MY SHOP, OFFERS, IDEAS & 라이프 스타일, 베이커리 등으로 구성된 탐색 메뉴 ...

나는 그것이 무엇인지는 정말로 모른다. 그게 뭐라 부르는 지 말해줘. 그래서 나는 찾을 수있을거야. 여기

fixed position 스타일링에 의해 달성 될 수 동일한 위치에 소자를 들고 제가

window.onscroll = function(){ 
    if(getScrollTop()>140) { 
     document.getElementById("menu").style.position="fixed"; 
    } else { 
     document.getElementById("menu").style.position=""; 
    } 
} 

function getScrollTop() { 
    if (window.onscroll) { 
     // Most browsers 
     return window.pageYOffset; 
    } 

    var d = document.documentElement; 
    if (d.clientHeight) { 
     // IE in standards mode 
     return d.scrollTop; 
    } 

    // IE in quirks mode 
    return document.body.scrollTop; 
} 
+0

이 질문에 대한 대답은 이미 여기에 있습니다. http://stackoverflow.com/q/6691558/144432 –

답변

3

수행 한 용액이다. 내비게이션 막대를 정확히 같은 위치에 유지하려면 position:fixed;이면 충분합니다. 당신이 페이지를 아래로 스크롤 당신이 당신의 탐색 모음은 그것에서 이동하려는 경우 당신은 here

그러나 a working example과 몇 가지 세부 사항을 찾을 수 있습니다

(적어도 비 IE6)는 페이지의 위쪽 테두리 초기 위치에 당신 페이지 스크롤 이벤트를 catch하고 이에 따라 <div>을 이동하려면 일부 JavaScript를 구현해야합니다.

수행 방법에 대한 예제는 this question을 참조하십시오.

+0

감사합니다. 나는 주어진 웹 사이트와 정확히 같은 네비게이션을 원한다. 그런 예가 있습니까? –

+0

이 답변 확인 http://stackoverflow.com/a/6691623/144432 –

+0

나는 그것을했다! 정말 고맙습니다!! –

0

참고 : Android 2.3 브라우저에서는 작동하지 않습니다. position:fixed은 예상대로 동작하지 않습니다. 화면 위로 이동하기 전에 일시적으로 스크롤 요소에 위치를 연결합니다.

0

원하는 경우 z- 인덱스를 특정 번호로 설정하면 작동합니다.

예 z- 색인 : 100;

관련 문제