javascript menu redfin scroll

Question

상단 탐색 모음에서 연결할 수있는 여러 앵커 태그가있는 매우 긴 웹 페이지가 있습니다. 막대는 사용자가 스크롤 할 때 화면 상단에 고정됩니다. 나는 사용자가 페이지를 스크롤하여 네비게이션을 따라 가로로 움직이는 작은 아이콘을 가지고 싶습니다. (당신이있는 곳을 가리킴) ... 내가 찾고있는 기능은 다음 링크에서 redfin.com입니다 ...

당신은 상단에있는 메뉴 수정 스크롤 시작으로

http://www.redfin.com/IL/Chicago/401-N-Wabash-Ave-60611/unit-89A/home/40378913

공지 사항 및 자동 페이지의 앵커로 스크롤이 탐색에있는 링크를 클릭하여 (이미이 내장 작업이) (I 작동하는 것이있다 게다가). 당신이있는 곳을 보여주는 작은 빨간 삼각형이 내가하고 싶은 것입니다. 솔직히 나는 이것을 알아내는 것부터 시작해야할지 모르겠다. 어떤 제안이나 샘플 코드도 많은 도움이 될 것입니다. 내가 알아낼 수있게되면 최종 제품의 조롱 된 버전을 게시 할 것입니다.

감사합니다. J

Answer 1

이것은 주로 HTML과 앵커의 위치에 따라 달라집니다. 필자의 경우 앵커가 화면 중앙에있을 때 움직이는 텍스트 및 숨겨진 측면 메뉴에 앵커가 있습니다. 여기 내 코드가있다. 이 코드 $에서

$('.hiding').each(function(i){ 
     var bottom_of_window = $(window).scrollTop() + $(window).height()/2; 
     if(bottom_of_window > $(this).position().top && $(this).position().top > 0){ 
      var txt = $(this).children('h1').text(); 
      $('.sideBar a').each(function() { 
       if ($(this).text() == txt){ 
        $(this).css('font-weight', 'bolder'); 
        $(this).parent().css({ 
          'left': '-1em', 
          'background-color': '#FC9', 
          'opacity': '0.6' 
          }); 
        } else { 
         $(this).css('font-weight', 'normal'); 
         $(this).parent().css({ 
          'left': '-2em', 
          'background-color': '#fff', 
          'opacity': '1' 
          }); 
         } 
        }); 
     } 

    }); 

('. 숨어')는 귀하의 앵커이며, $ ('사이드 바가.') - 당신이있는 곳을 보여줍니다 숨겨진 사이드 메뉴.