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

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

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

Что я сейчас пытаюсь сделать, так это:

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

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

С классом .detached вот так:

.detached { position: static; }

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


javascript css twitter-bootstrap affix
person jjms    schedule 22.02.2013    source источник
comment
Я не думаю, что это возможно со стандартным модулем аффикса Twitter Bootstrap.   -  person Jesse    schedule 23.02.2013
comment
Я думаю, вы ищете вопрос [ответ здесь.] [1] Проверьте скрипку. [1]: stackoverflow. ком/вопросы/15197453/   -  person Thomas    schedule 24.04.2013

Ответы (3)


arrow_upward
3
arrow_downward

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

person Miljan Puzović    schedule 22.02.2013
comment
Это возможно с бутстрапом и js - person Shail; 23.02.2013
comment
С бутстрапом и js... Это значит - используйте бутстрап, но также меняйте предоставленный код js и создавайте свой. Если бы ОП мог это сделать, он бы никогда не задал этот вопрос. Поэтому я указал на небольшой скрипт, простой в использовании. - person Miljan Puzović; 28.02.2013
comment
@Shail Как это возможно с twitter-bootstrap? Я бы не хотел использовать другую библиотеку (например, hcSticky или jsfiddle). - person Geoffrey De Smet; 27.06.2013

arrow_upward
3
arrow_downward

Вы можете написать логику в функции и передать ее в аффикс как 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;
        }
    }
});

Скрипт здесь.

person Clxy    schedule 04.07.2013
comment
Потрясающе, как раз то, что мне было нужно. Несколько версий панели навигации прямо здесь: jsfiddle.net/BuNq2/5 - person fro_oo; 13.05.2015

arrow_upward
2
arrow_downward

Другой вариант, который может вам подойти: 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'});
}
});
})

Удачи!

person David Taiaroa    schedule 04.07.2013