Как использовать новый плагин affix в bootstrap 2.1.0 twitter?

загрузочная документация по этой теме немного сбивает меня с толку. Я хочу добиться аналогичного поведения, как в документах с affix 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 есть хотя бы какой-то эффект, который можно наблюдать.



Если также поставить код javascript на место:



     <script>

        $(document).ready (function (){

            $(".navbar").affix ();

        });

     </script>


любая помощь ценится.

682   9  

9 ответов:

у меня была аналогичная проблема, и я считаю, что нашел улучшенное решение.

не утруждайте себя указанием data-offset-top в HTML. Вместо этого укажите его при вызове .affix():

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

преимущество здесь заключается в том, что вы можете изменить макет вашего сайта без необходимости обновления . Поскольку при этом используется фактическое вычисленное положение элемента, это также предотвращает несоответствия с браузерами, которые отображают элемент в несколько ином позиция.

вам все равно нужно будет зажать элемент в верхней части с помощью CSS. Кроме того, я должен был поставить width: 100% на элементе навигации с .nav С ЭЛЕМЕНТАМИ position: fixed хулиганят почему-то:

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

и последнее: когда прикрепленный элемент становится фиксированным, его элемент больше не занимает место на странице, в результате чего элементы под ним "прыгают". Чтобы предотвратить это уродство, я заворачиваю navbar в div чей рост я установил, чтобы быть равно навигационной панели во время выполнения:

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

.

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

вот обязательный jsFiddle, чтобы увидеть его в действии.

160  
2013-09-11 04:13:14

просто реализовано это в первый раз, и вот что я нашел.

The data-offset-top значение-это количество пикселей, которое необходимо прокрутить для того, чтобы эффект прикрепления имел место. В вашем случае, один раз 50px прокручивается, класс на вашем элементе изменяется от .affix-top до .affix. Вы, вероятно, хотите установить data-offset-top о 130px в вашем случае использовать.

как только это изменение класса происходит, вы должны разместить свой элемент в css, стилизуя позиционирование для класса .affix. Bootstrap 2.1 уже определяет .affix как position: fixed; поэтому все, что вам нужно сделать, это добавить свои собственные ценности, установки.

пример:

.affix {
    position: fixed; 
    top: 20px; 
    left: 0px;
}
76  
2012-08-23 02:09:09

чтобы исправить эту проблему, я изменил плагин affix, чтобы создать событие jQuery, когда объект прикреплен или не прикреплен.

вот запрос на вытягивание: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>
5  
2012-08-26 01:52:01

вам нужно удалить .affix() из скрипта.

Bootstrap дает возможность выполнять вещи либо через data-attributes или прямой JavaScript большую часть времени.

3  
2012-09-26 07:41:10

я получил это из исходного кода 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);
});
2  
2013-02-17 10:31:39

вам просто нужно удалить скрипт. Вот мой пример:

<!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>
1  
2012-10-01 16:19:17

спасибо namuol и Дэйв поцелуй за решение. В моем случае у меня была небольшая проблема с высотой и шириной navbar, когда я использовал Плагины afflix и collapse вместе. Проблема с шириной может быть легко решена наследованием ее от родительского элемента (контейнера в моем случае). Также мне удалось сделать его плавно сворачивающимся с помощью немного javascript (на самом деле 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()
1  
2013-02-20 23:19:38

мое решение для прикрепления 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  
2012-08-28 02:38:16

подобно принятому ответу, вы также можете сделать что-то вроде следующего, чтобы сделать все за один раз:

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

это не только вызывает affix плагин, но также обернет прикрепленный элемент в div, который будет поддерживать исходную высоту навигационной панели.

0  
2015-09-02 20:27:36

Comments

    Ничего не найдено.
Click here to cancel reply.