Twitter 부트 스트랩으로 스크롤 위치를 기반으로 DOM을 업데이트 하시겠습니까?

Question

이 페이지를 보는 경우 : http://twitter.github.com/bootstrap/components.html

하위 메뉴와 위치를 기록해 둡니다. 이제 아래로 스크롤하십시오. 어떻게 바뀌 었는지 확인하십시오. 나는 그들이 scrollspy 플러그인으로 구현했다고 생각했지만, 어떻게 할 것인지를 생각할 수 없다. 내가 할 수있는 것은 목록 요소에 활성 클래스가있는 업데이트 다.

은 어떤 도움이 많이 주시면 감사하겠습니다 :)

Answer 1

당신은 그것을이 다운로드에 포함 된 것처럼 보이지 않는 application.js 파일에 코드의이 비트를 찾을 수 있습니다. 그냥

// fix sub nav on scroll 
var $win = $(window) 
    , $nav = $('.subnav') 
    , navTop = $('.subnav').length && $('.subnav').offset().top - 40 
    , isFixed = 0 

processScroll() 

$win.on('scroll', processScroll) 

function processScroll() { 
    var i, scrollTop = $win.scrollTop() 
    if (scrollTop >= navTop && !isFixed) { 
    isFixed = 1 
    $nav.addClass('subnav-fixed') 
    } else if (scrollTop <= navTop && isFixed) { 
    isFixed = 0 
    $nav.removeClass('subnav-fixed') 
    } 
} 

을 크롬

의 코드를 통해 강화, 충분히 재미있게 헤더 주석이 그것을 테스트하지 않았습니다 ... 내가 믿는 무거운 리프팅을 수행하는 부분이다

// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT 
// IT'S ALL JUST JUNK FOR OUR DOCS! 
// ++++++++++++++++++++++++++++++++++++++++++ 

읽고 ... 사용할 수 here입니다

Answer 2

CCBlackburn의 답변은 필수 스타일 시트가 누락되어 있지만 가까워졌습니다. 후손을 위해 나는 자바 스크립트도 포함시켰다.

자바 스크립트

// fix sub nav on scroll 
var $win = $(window) 
    , $nav = $('.subnav') 
    , navTop = $('.subnav').length && $('.subnav').offset().top - 40 
    , isFixed = 0 

processScroll() 

// hack sad times - holdover until rewrite for 2.1 
$nav.on('click', function() { 
    if (!isFixed) setTimeout(function() { $win.scrollTop($win.scrollTop() - 47) }, 10) 
}) 

$win.on('scroll', processScroll) 

function processScroll() { 
    var i, scrollTop = $win.scrollTop() 
    if (scrollTop >= navTop && !isFixed) { 
    isFixed = 1 
    $nav.addClass('subnav-fixed') 
    } else if (scrollTop <= navTop && isFixed) { 
    isFixed = 0 
    $nav.removeClass('subnav-fixed') 
    } 
} 

스타일 시트

/* Fixed subnav on scroll, but only for 980px and up (sorry IE!) */ 
@media (min-width: 980px) { 
    .subnav-fixed { 
    position: fixed; 
    top: 40px; 
    left: 0; 
    right: 0; 
    z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */ 
    border-color: #d5d5d5; 
    border-width: 0 0 1px; /* drop the border on the fixed edges */ 
    -webkit-border-radius: 0; 
     -moz-border-radius: 0; 
      border-radius: 0; 
    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); 
     -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); 
      box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */ 
    } 
    .subnav-fixed .nav { 
    width: 938px; 
    margin: 0 auto; 
    padding: 0 1px; 
    } 
    .subnav .nav > li:first-child > a, 
    .subnav .nav > li:first-child > a:hover { 
    -webkit-border-radius: 0; 
     -moz-border-radius: 0; 
      border-radius: 0; 
    } 
} 

/* LARGE DESKTOP SCREENS */ 
@media (min-width: 1210px) { 

    /* Update subnav container */ 
    .subnav-fixed .nav { 
    width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */ 
    } 

} 

: 어쨌든 나는 다음을 사용하여 작업 있어요