Twitter의 부트 스트랩 2.1.0에서 새로운 affix 플러그인을 사용하는 방법은 무엇입니까?

110

그 주제에 대한 부트 스트랩 문서는 저에게 약간 혼란 스럽습니다. 접미사 navbar가있는 문서에서와 같은 유사한 동작을 달성하고 싶습니다 : navbar는 단락 / 페이지 머리글 아래에 있으며 아래로 스크롤하면 먼저 페이지 상단에 도달 할 때까지 스크롤 한 다음 추가 스크롤 다운을 위해 고정 된 상태로 있어야합니다. .

jsFiddle은 navbar 개념에서 작동하지 않기 때문에 최소한의 예제로 사용할 별도의 페이지를 설정했습니다. http://i08fs1.ira.uka.de/~s_drr/navbar.html

나는 이것을 내 navbar로 사용합니다.

<div class="navbar affix-top" data-spy="affix" data-offset-top="50">
    <div class="navbar-inner">
        <div class="container">
            <div class="span12">
                <a class="brand" href="#">My Brand</a> 
                This is my navbar.
             </div>
        </div> <!-- container -->
    </div> <!-- navbar-inner -->
</div> <!-- navbar -->

나는 data-offset-top가치가 0 이되기를 원할 것이라고 생각 한다 (막대가 맨 위에 "고정"되어야하기 때문이다 "). 그러나 50을 사용하면 적어도 관찰 할 수있는 효과가있다.

자바 스크립트 코드도 제자리에 넣으면 :

     <script>
        $(document).ready (function (){
            $(".navbar").affix ();
        });
     </script>

도움을 주시면 감사하겠습니다.

css  web  twitter-bootstrap  navbar 
— 다이나 론
소스
페이지의 기본 탐색 모음에서 affix ()를 사용하려고합니까?
— Nithin Emmanuel 2012-08-22
@NithinEmmanuel 예, 게시물 또는 샘플에서 자바 스크립트를 참조하세요. i08fs1.ira.uka.de/~s_drr/navbar.html
— Dynalon
.navbar-fixed-topaffix () 대신 use를 사용하지 않는 이유는 무엇입니까?
— Nithin Emmanuel 2012-08-22
6
@NithinEmmanuel 그게 내가 원하는 것이 아니기 때문에. .navbar-fixed-top상단에 메뉴 바을 배치 할 모든 시간을 . 내비게이션 바 위에 페이지 헤더를 원하고 아래로 스크롤 할 때 (따라서 내비게이션 바가 멀리 스크롤 될 수 있음) 상단에 고정되어야합니다. 부트 스트랩 문서는 이전 문서의 subnav와 매우 동일한 메커니즘을 사용했지만 슬프게도 2.1.0 문서에서는 제거했습니다.
— Dynalon 2012-08-22
1
하나의 경우 Javascript의 중첩이 올바르지 않습니다. )};이어야합니다});
— Owen

답변:

160

비슷한 문제가 있었는데 개선 된 해결책을 찾았다 고 생각합니다.

data-offset-topHTML에서 지정하지 마십시오 . 대신 다음을 호출 할 때 지정하십시오 .affix().

$('#nav').affix({
    offset: { top: $('#nav').offset().top }
});​

여기서의 장점은 data-offset-top속성 을 업데이트하지 않고도 사이트의 레이아웃을 변경할 수 있다는 것 입니다. 이것은 요소의 실제 계산 된 위치를 사용하기 때문에 약간 다른 위치에서 요소를 렌더링하는 브라우저와의 불일치를 방지합니다.

CSS를 사용하여 요소를 맨 위에 고정해야합니다. 또한 어떤 이유로 요소가 오작동하기 width: 100%때문에 nav 요소 를 설정해야했습니다 ..navposition: fixed

#nav.affix {
    position: fixed;
    top: 0px;
    width: 100%;
}

마지막 한 가지 : 부착 된 요소가 고정되면 해당 요소가 더 이상 페이지에서 공간을 차지하지 않으므로 그 아래 요소가 "점프"됩니다. 이 추함을 방지하기 위해 div런타임에 navbar와 같은 높이로 설정 한 navbar를 래핑합니다 .

<div id="nav-wrapper">
    <div id="nav" class="navbar">
        <!-- ... -->
    </div>
</div>

.

$('#nav-wrapper').height($("#nav").height());

실제로 작동하는 것을보기위한 필수 jsFiddle이 있습니다 .

— 나무 올
소스
6
"점프"를 제거하는 좋은 팁-이 항목이 제거된다는 사실을 완전히 간과하고 내 문제가 내 코드의 affix / js 부분에 포함되어 있다고 생각했습니다.
— Thomas
1
이 답변이 최고입니다! 모든 것이 정상적으로 작동합니다. '점프'부분은 내가 찾은 대부분의 튜토리얼에서 누락 된 부분이었습니다. 감사!
— Ricardo Otero 2013
1
한 가지 중요한 수정 사항 : 첫 번째 코드 스 니펫의 jquery 코드에서 position () 대신 offset ()을 사용하십시오. 설명 : position () 함수는 부모 요소 내에서 오프셋을 제공하지만 offset ()은 실제로 원하는 문서 내의 위치입니다 (예, 이름은 직관적이지 않습니다). 따라서 affix 요소가 다른 요소 안에 있으면 코드가 작동하지 않습니다. 또한 다음과 같이 "top"값만 전달해야합니다. $ ( "# nav"). affix ({offset : {top : $ ( '# nav'). offset (). top. 그리고 준비된 내부에 있어야합니다. () 블록으로 페이지 레이아웃이 완료되었음을 알 수 있습니다.
— orrd
감사합니다 @orrd-내 대답과 바이올린 업데이트!
— namuol 2013-09-11
좋은! 완벽하게 작동하며 매우 부드럽습니다. 그건 그렇고, 나는 끈적한 바닥 글이있는 동일한 예를 찾고 있습니다. 그 방법을 알고 있다면 jsFiddle을 업데이트 할 수 있습니까? 감사!
— Jocelyn 2013
76

처음으로 이것을 구현했으며 여기에 내가 찾은 것이 있습니다.

data-offset-top값은 걸릴 장소에 부착 효과를 위해 스크롤해야하는 픽셀의 양입니다. 귀하의 경우 한 번 50px스크롤하면 항목의 클래스가에서 .affix-top로 변경 됩니다 .affix. 유스 케이스에서 data-offset-topabout 로 설정하고 싶을 것입니다 130px.

이 클래스 변경이 발생하면 class의 위치를 ​​지정하여 CSS에 요소를 배치해야합니다 .affix. Bootstrap 2.1은 이미 정의 .affix되어 position: fixed;있으므로 자신의 위치 값을 추가하기 만하면됩니다.

예:

.affix {
    position: fixed; 
    top: 20px; 
    left: 0px;
}
— 데이브 키스
소스
1
Thx, 다소 작동합니다. 여기에 내 예제 페이지를 업데이트했습니다. 문제는 이제 navbar가 css 클래스로 "affix"를 가져 오자마자 navbar css 클래스가 폐기된다는 것입니다. 그러나 나는 그것이 부트 스트랩의 버그 / 단점이라고 생각합니다. LESS에서 수행하고 부트 스트랩을 다시 작성하지 않고는 변경하기가 쉽지 않습니다.
— Dynalon
그것은 나를 보이는 .navbar클래스가 보존됩니다 - 당신이 확신?
— Dave Kiss
이 답변 주셔서 감사합니다, 나는이 알아 내려고 나이를 보냈다
— 르우벤
약간 개선되고 더 일반적인 솔루션에 대한 내 대답 을 참조하십시오 .
— namuol
5

이 문제를 해결하기 위해 객체가 부착되거나 부착되지 않은 경우 jQuery 이벤트를 발생하도록 affix 플러그인을 수정했습니다.

풀 리퀘스트 : https://github.com/twitter/bootstrap/pull/4712

그리고 코드 : https://github.com/corbinu/bootstrap/blob/master/js/bootstrap-affix.js

그런 다음 navbar를 연결하려면 다음을 수행하십시오.

<script type="text/javascript">
$(function(){
    $('#navbar').on('affixed', function () {
        $('#navbar').addClass('navbar-fixed-top')
    });

    $('#navbar').on('unaffixed', function () {
        $('#navbar').removeClass('navbar-fixed-top')
    });
});
</script>
— 코빈 U
소스
3

.affix()스크립트에서 제거해야합니다 .

부트 스트랩은 data-attributes대부분의 경우 자바 스크립트 를 통해 또는 직접 자바 스크립트 를 통해 작업을 수행 할 수있는 옵션을 제공합니다 .

— 패트릭 라플린
소스
2

나는 twitterbootstrap의 소스 코드에서 이것을 얻었고 꽤 잘 작동합니다.

HTML :

<div class="row">
    <div class="span3 bs-docs-sidebar">
        <ul id="navbar" class="nav nav-list bs-docs-sidenav">
            ...
        </ul>
    </div>
</div>

CSS :

.bs-docs-sidenav {
    max-height: 340px;
    overflow-y: scroll;
}

.affix {
    position: fixed;
    top: 50px;
    width: 240px;
}

JS :

$(document).ready(function(){
    var $window = $(window);
    setTimeout(function () {
        $('.bs-docs-sidenav').affix({
            offset: {
                top: function (){
                    return $window.width() <= 980 ? 290 : 210
                }
            }
        })
    }, 100);
});
— 예수 로드리게스
소스
1

스크립트를 제거하기 만하면됩니다. 내 예는 다음과 같습니다.

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>

  <style>
  #content {
    width: 800px;
    height: 2000px;
    background: #f5f5f5;
    margin: 0 auto;
  }
  .menu {
    background: #ccc;
    width: 200px;
    height: 400px;
    float: left;
  }
  .affix {
    position: fixed;
    top: 20px;
    left: auto;
    right: auto;
  }
  </style>

</head>
<body>
    <div id="content">
        <div style="height: 200px"></div>

        <div class="affix-top" data-spy="affix" data-offset-top="180">
            <div class="menu">AFFIX BAR</div>
        </div>
    </div>
</body>
</html>
— Beckovsky
소스
1

해결책에 대해 namuol과 Dave Kiss에게 감사드립니다. 제 경우에는 afflix와 축소 플러그인을 함께 사용할 때 navbar 높이와 너비에 작은 문제가있었습니다. 너비 문제는 부모 요소 (제 경우에는 컨테이너)에서 상속하여 쉽게 해결할 수 있습니다. 또한 나는 약간의 자바 스크립트 (실제로 coffeescript)로 부드럽게 접힐 수있었습니다. 트릭은 auto축소 토글이 발생하기 전에 래퍼 높이를 설정 하고 나중에 다시 수정하는 것입니다.

마크 업 (haml) : 

#wrapper
  #navbar.navbar
    .navbar-inner
      %a.btn.btn-navbar.btn-collapse
        %span.icon-bar
        %span.icon-bar
        %span.icon-bar

      #menu.nav-collapse
        -# Menu goes here

CSS :

#wrapper {
  width: inherit;
}

#navbar {
  &.affix {
    top: 0;
    width: inherit;
  }
}

Coffeescript :

class Navigation
  @initialize: ->
    @navbar = $('#navbar')
    @menu = $('#menu')
    @wrapper = $('#wrapper')

    @navbar.affix({offset: @navbar.position()})
    @adjustWrapperHeight(@navbar.height())

    @navbar.find('a.btn-collapse').on 'click', () => @collapse()

    @menu.on 'shown', () => @adjustWrapperHeight(@navbar.height())
    @menu.on 'hidden', () => @adjustWrapperHeight(@navbar.height())

  @collapse: ->
    @adjustWrapperHeight("auto")
    @menu.collapse('toggle')

  @adjustWrapperHeight: (height) ->
    @wrapper.css("height", height)

$ ->
  Navigation.initialize()
— Voldy
소스
0

navbar 연결 솔루션 :

function affixnolag(){

    $navbar = $('#navbar');
    if($navbar.length < 1)
        return false;

    h_obj = $navbar.height();

    $navbar
        .on('affixed', function(){      
            $navbar.after('<div id="nvfix_tmp" style="height:'+h_obj+'px">');
        })
        .on('unaffixed', function(){
            if($('#nvfix_tmp').length > 0)
                $('#nvfix_tmp').remove();
        });
 }
— 플로리안
소스
0

수락 된 답변과 유사하게 다음과 같이 모든 작업을 한 번에 수행 할 수도 있습니다.

$('#nav').affix({
  offset: { top: $('#nav').offset().top }
}).wrap(function() {
  return $('<div></div>', {
    height: $(this).outerHeight()
  });
});​

이것은 affix플러그인을 호출 할 뿐만 아니라 navbar의 원래 높이를 유지하는 div에 부착 된 요소를 래핑합니다.

— Adrian
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.