it-roy-ru.com

Twitter Bootstrap Affix - как придерживаться дна?

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


ДЕМО: http://jsfiddle.net/uvnGP/1/

JS

$("#account-overview-container").affix({
    offset: {
        top: $("header").outerHeight(true),
        bottom: $("footer").outerHeight(true)
    }
});

SASS

#account-overview-container {
    &.affix{
        top:10px;
        bottom:auto;
    }

    &.affix-top{
        //Do I need this?
    }

    &.affix-bottom{
        position:absolute;
        top:auto;
        bottom:140px;
    }
}
20
Chris Barr

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

Вот ссылка

http://jsfiddle.net/uvnGP/131/

Проблема заключалась в том, что когда аффикс достиг дна, в ваш контейнер был добавлен стиль top и bottom css (#sidebar), способ исправить это - сбросить bottom стиль авто, таким образом, только стиль top будет действовать в вашем контейнере

вот код:

var headerHeight = $('header').outerHeight(true); // true value, adds margins to the total height
var footerHeight = $('footer').innerHeight();
$('#account-overview-container').affix({
    offset: {
        top: headerHeight,
        bottom: footerHeight
    }
}).on('affix.bs.affix', function () { // before affix
    $(this).css({
        /*'top': headerHeight,*/    // for fixed height
            'width': $(this).outerWidth()  // variable widths
    });
}).on('affix-bottom.bs.affix', function () { // before affix-bottom
    $(this).css('bottom', 'auto'); // THIS is what makes the jumping
});
13
Paco Rivera

Если вы не против использовать атрибуты data- в разметке вместо SASS, это должно сработать:

http://www.bootply.com/l95thIfavC

Вы также увидите, что я удалил аффикс JS.

HTML

<div class="well well-small affix-top" data-spy="affix" data-offset-top="150" id="account-overview-container">

CSS

body{
    position:relative;
}
header,
footer{
    background: #ccc;
    padding:40px 0;
    text-align:center;
}
header{
    margin-bottom: 10px;
}

.affix-top {
    top: 155px;
    position:absolute;
}
.affix {
    bottom:140px;
}

Обновление для Bootstrap 3

Чтобы использовать affix-bottom, вам нужно установить высоту нижнего колонтитула или пробел под прикрепленным элементом. Вот пример: http://www.bootply.com/l95thIfavC

2
Zim

Краткий ответ: Помните, что контент внутри вашего аффикса не использует box-sizing: border-box;, если вы используете границы.

Объяснение: Функция jQuery offset(), используемая в affix.js для вычисления текущей позиции элемента относительно документа, не учитывает границы.

Примечание: jQuery не поддерживает получение координат смещения скрытых элементов или учет границ, полей или отступов, заданных для элемента body.

Таким образом, если содержимое внутри вашего аффикса имеет границу и для него box-sizing установлено значение border-box, высота будет включать границу, но смещение не будет, в результате чего используемый аффикс вычисления будет слегка смещен.

1
daddeo

Решение Paco Rivera работает! Но не так, как он намеревался .. Ват действительно убирает проблему мерцания (прыжка) в этой строке:

.on('affix.bs.affix', function () { // before affix
    $(this).css({
        'width': $(this).outerWidth()  // variable widths
    });
})

Достаточно устал, вам даже не нужно устанавливать ширину CSS. Просто чтение этого параметра уже помогает. Я упростил код до следующего фрагмента, и он все еще работает:

.on('affix.bs.affix', function () { // before affix
    $(this).width();
});

Я сохраню это до следующего выпуска плагина Bootstrap Affix, где, я надеюсь, они исправят это раз и навсегда.

1
Konstantin

Мне удалось заставить его работать в моем приложении, вопрос в том, чтобы согласовать стиль дна с нижним уровнем, передаваемым вызову аффикса. Если ваш нижний колонтитул имеет фиксированную высоту, а ближайший родительский элемент - это тело, тогда необходимо передать одно и то же значение для обоих. Это достаточно хорошо работает с документами Bootstrap 2.3, как видно здесь и здесь .

-

Теперь, если у вас нет нижнего колонтитула с фиксированной высотой:

Шаг 1: Ближайший родительский элемент (смещенный родитель)

Прежде всего, мы используем абсолютное позиционирование, чтобы прикрепить его к основанию, но так как ваш ближайший родительский элемент будет телом (включая нижний колонтитул), у вас нет фиксированного значения для основания. Чтобы это исправить, мы должны создать нового позиционируемого родителя, который будет содержать все, кроме нижнего колонтитула (важно: заголовок, вероятно, тоже будет снаружи). Задайте для position: relative; либо верхний .container, либо одного из его предков (важно: нижний колонтитул должен быть после этого элемента).

Шаг 2: Высота нижнего колонтитула

Теперь ваше основание относительно его контейнера вместо тела, но нижнее значение аффикса (используется, чтобы знать, когда прикреплять аффикс к основанию) по-прежнему относительно конца тела, поэтому вы должны передать ему функцию которые вычисляют высоту элементов после контейнера, если это только нижний колонтитул, то этого достаточно: $('footer').outerHeight(true).

Шаг 3: Устранение неисправностей

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

  1. Другие визуальные элементы, кроме нижнего колонтитула, которые вы не учли, такие как вторые нижние колонтитулы или которые не всегда отображаются, например, полезные Rails-footnotes gem ;

  2. Расширения браузера, которые добавляют элементы в DOM, если они скрыты или отсутствуют в потоке, тогда не следует считать их высоту, более простой способ обойти это подсчитать только те элементы, которые знает ваше приложение, но тогда расширение может закончиться ломать ваше приложение. Вы можете проверить, если это расширение вызывает Вас проблемы с помощью браузера или конфигурации, которые не имеют установленных расширений, или просто перейдя в "режим порно" (инкогнито на Chromium (Ctrl+Shift+n), Приватный просмотр в Firefox (Ctrl+Shift+p)) если у вас не включены расширения на нем.

  3. Библиотеки Javascript также добавляют элементы в DOM, вы не должны также учитывать их высоту.

Чтобы решить их, вы можете попытаться заставить его работать со всем Word (CoffeeScript с Underscore.js):

_($('footer').nextAll(':visible').addBack())
  .filter((el) -> el.offsetParent?)
  .reduce(((memo, el) -> memo + $(el).outerHeight(true)), 0)

То же самое, с Javascript и jQuery.fn.each:

var sum = 0
$('footer').nextAll(':visible').each(function() {
  this.offsetParent != null && sum += $(this).outerHeight(true)
}
return sum

Или вы могли бы учитывать только те элементы, которые вы знаете (я предпочитаю это, другой, который я кодировал для вызова):

$('footer').outerHeight(true) + ($('#footnotes_debug').outerHeight(true) || 0)
1
michelpm

Просто замените сегмент кода для аффикса в начальной загрузке, как указано ниже.

Это идет - 

this.$element.offset({ top: document.body.offsetHeight - offsetBottom - this.$element.height() }) 

и это заменяет его 

this.$element.offset({ top: scrollHeight - offsetBottom - this.$element.height() })

Приветствия.

0
Rohan

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

0
Alexander Mistakidis

Одним из возможных решений является полное игнорирование ситуации affix-bottom путем установки bottom: null следующим образом:

$("#my-selector").affix({
    offset: {
        top: $("#some-thing").outerHeight(true),
        bottom: null
    }
});
0
Chris Barr

Установите положение меню внизу, используя свойство position и top, bottom и используйте демонстрационную версию здесь http://www.tutorialspark.com/twitterBootstrap/TwitterBootstrap_Affix.php

0
user2719087

Я сделал это с помощью проб и ошибок, но это то, что сработало для меня.

JS

$(document).ready(function() {
var SidebarTop = $('#your-affix').offset().top - x; //adjust x to meet your required positioning
    SidebarBottom = $('.site-footer').outerHeight() + x;

    $('#your-affix').affix({
        offset: {
        top: SidebarTop,
        bottom: SidebarBottom
        }
    });
});

CSS

#your-affix.affix {
    top: boo px; //the px from top of the window where you want your sidebar
                 //be when you scroll
    width: foo px; //your sidebar width
  }
#your-affix.affix-bottom {
    position: absolute;
    width: foo px; //your sidebar width
}

После этого кода моя боковая панель становится «открепленной», когда она достигает нижнего колонтитула. И перестает прыгать на вершину сайта, когда он достигает опции нижнего смещения.

0
Oksana Romaniv

Установите position: absolute для .affix-top & .affix-bottom и position: fixed для .affix.

По словам официального док

0
Stream Huang