Прикрепить и отсоединить прикрепленные заголовки с помощью Twitter Bootstrap

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

Я использую скрипт из этого jsfiddle.

То, что я пытаюсь сейчас это:

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

$('#nav').affix({ 
    offset: $('#nav').position() 
}); 
$('#nav').detached({ 
    offset: $('#bottom').position() 
});

С .detached класс следующим образом:

.detached { position: static; }

Не удается получить эту работу. Какие-либо предложения?

источник

2013-02-22 jjms

Я не думаю, что это возможно со стандартным модулем ассемблера Twitter Bootstrap. – Jesse

Я думаю, вы ищете вопрос [здесь]. [1] Посмотрите на скрипку. [1]: http://stackoverflow.com/questions/15197453/affix-div-to-bottom-of-window?rq=1 – Thomas

Щебетать Модуль ассемблера Bootstrap не имеет такой опции. Но, я использовал много раз hcSticky, это потрясающе. Взгляните, это просто использовать и работает очень хорошо.

источник

2013-02-22 21:41:18

можно с начальной загрузкой и JS – Shail

«С начальной загрузкой и js "... Это означает - использовать bootstrap, но также изменить предоставленный js-код и создать свой собственный. Если бы ОП мог это сделать, он никогда не задавал этот вопрос. Поэтому я указал на небольшой скрипт, простой в использовании. –

@Shail Как это возможно с twitter-bootstrap? Я бы хотел избежать использования другой библиотеки (например, hcSticky или jsfiddle). –

Вы можете написать логику в функции и передать ее аффикс как offset.top.

Попробуйте

var navHeight = $("#nav").height(); 
var detachTop = $("#detach").offset().top; 
var navTop = $("#nav-wrapper").offset().top; 

$('#nav-wrapper').height(navHeight); 
$('#nav').affix({ 
    offset : { 
     top : function() { 
      if ((navHeight + $(window).scrollTop()) > detachTop) { 
       return Number.MAX_VALUE; 
      } 
      return navTop; 
     } 
    } 
});

Fiddle is here.

источник

2013-07-04 02:42:10 Clxy

Удивительный, только то, что мне нужно. Несколько вариантов навбер прямо здесь: http://jsfiddle.net/BuNq2/5/ –

Другой вариант, который может работать для вас: http://jsfiddle.net/panchroma/5n9vw/

HTML

<div class="header" data-spy="affix"> 
affixed header, released after scrolling 100px 
</div>

Javascript

$(document).ready(function(){ 
$(window).scroll(function(){ 
var y = $(window).scrollTop(); 
if(y > 100){ 
    $(".header.affix").css({'position':'static'}); 
} else { 
    $(".header.affix").css({'position':'fixed'}); 
} 
}); 
})

Удачи вам!

источник

2013-07-04 04:07:24

Прикрепить и отсоединить прикрепленные заголовки с помощью Twitter Bootstrap

ответ

Смежные вопросы