it-swarm.com.de

Twitter Bootstrap Affix - wie hält man sich am Boden?

Ich habe die Dokumentation gelesen und habe das Gefühl, genau das zu tun, was sie in ihren Beispielen zeigen. Aber wenn ich es versuche, kann ich das nicht zum Laufen bringen. Ich möchte, dass es ähnlich arbeitet wie die Dokumente. Es wird zu position:fixed, nachdem Sie an der Kopfzeile vorbeigefahren sind. Wenn Sie dann die Fußzeile berühren, wird position:absolute und bleibt unten.


DEMO: 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

Es gibt einige Änderungen von Ihrem Code, aber die Lösung passt für variable Kopf- und Fußzeilenhöhen, ansprechende Breite und kann für feste Header geändert werden.

Hier ist der Link

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

Das Problem war, als der Affix unten angekommen war, wurden ein oben und ein unten css-Stil zu Ihrem Container (#sidebar) hinzugefügt bottom style auf auto, so dass nur der top style auf Ihren Container wirkt

hier ist der code:

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

Wenn es Ihnen nichts ausmacht, 'data-' Attribute anstelle von SASS im Markup zu verwenden, sollte dies funktionieren:

http://www.bootply.com/l95thIfavC

Sie werden auch sehen, dass ich den JS-Affix entfernt habe.

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;
}

Update für Bootstrap 3

Um affix-bottom verwenden zu können, müssen Sie im Wesentlichen die Höhe der Fußzeile oder des Leerraums unter dem angebrachten Element festlegen. Hier ein Beispiel: http://www.bootply.com/l95thIfavC

2
Zim

Kurze Antwort: Beachten Sie, dass der Inhalt in Ihrem Affix nicht box-sizing: border-box; verwendet, wenn Sie Ränder verwenden.

Erläuterung: Die in affix.js zur Berechnung der aktuellen Position des Elements relativ zum Dokument verwendete Funktion jQuery offset() berücksichtigt keine Rahmenbedingungen.

Hinweis: jQuery unterstützt nicht das Abrufen der Versatzkoordinaten von ausgeblendeten Elementen oder die Berücksichtigung von Rändern, Rändern oder Auffüllvorgängen für das body-Element.

Wenn der Inhalt in Ihrem Affix also einen Rand hat und box-sizing auf border-box gesetzt ist, wird die Höhe den Rand einschließen, der Versatz jedoch nicht, was dazu führt, dass der Berechnungs-Affix etwas abweicht.

1
daddeo

Lösung von Paco Rivera funktioniert! Aber nicht in der Art und Weise, wie er es vorhatte . Wat entfernt das flackernde (springende) Problem wirklich:

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

Genug genug, müssen Sie nicht einmal die CSS-Breite einstellen. Das Lesen dieses Parameters hilft bereits. Ich habe den Code auf das folgende Fragment vereinfacht und es funktioniert immer noch:

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

Ich werde es bis zur nächsten Version des Bootstrap Affix Plugins beibehalten, wo ich hoffe, dass sie es ein für alle Mal beheben werden.

1
Konstantin

Ich habe es geschafft, dass es in meiner App funktioniert. Es geht darum, das Bottom-Styling mit dem Bottom zu vereinbaren, das an den Affix-Aufruf übergeben wird. Wenn Ihre Fußzeile eine feste Höhe hat und das nächste positionierte übergeordnete Element der Körper ist, müssen Sie für beide denselben Wert übergeben. Das funktioniert gut genug für die Dokumente von Bootstrap 2.3, wie in hier und hier gezeigt.

-

Angenommen, Sie haben keine Fußzeile mit fester Höhe:

Schritt 1: Nächstgelegenes übergeordnetes Element (versetztes übergeordnetes Element)

Zunächst verwenden wir die absolute Positionierung, um sie am unteren Rand zu befestigen, aber da Ihr nächstgelegenes übergeordnetes Element der Körper (einschließlich Ihrer Fußzeile) ist, haben Sie keinen festen Wert für den unteren Rand. Um dies zu beheben, müssen wir ein neu positioniertes übergeordnetes Element erstellen, das alles außer der Fußzeile einschließt (wichtig: Die Kopfzeile wird wahrscheinlich auch außerhalb sein). Setzen Sie position: relative; entweder auf den obersten .container oder auf einen seiner Vorfahren (wichtig: Die Fußzeile muss nach diesem Element stehen).

Schritt 2: Fußzeilenhöhe

Nun ist Ihr Boden relativ zu seinem Container anstelle von body, aber der Bodenwert von affix (verwendet, um zu wissen, wann der Affix am Boden befestigt werden muss) ist immer noch relativ zum Ende des Körpers, sodass Sie ihm eine Funktion übergeben müssen Diese berechnen die Höhe der Elemente nach dem Container. Wenn es sich nur um die Fußzeile handelt, reicht dies aus: $('footer').outerHeight(true).

Schritt 3: Fehlerbehebung

Jetzt haben Sie alles richtig gemacht, aber drei Dinge können immer noch eine falsche Stick-Position und verrücktes Blinken verursachen:

  1. Andere visuelle Elemente neben der Fußzeile, die Sie nicht berücksichtigt haben, wie die zweiten Fußzeilen oder die nicht immer angezeigt werden, wie das nützliche Rails-footnotes gem ;

  2. Browsererweiterungen, die Elemente an das DOM anhängen. Wenn sie ausgeblendet sind oder nicht im Flow enthalten sind, sollten Sie ihre Höhe nicht zählen. Der einfachere Weg, dies zu umgehen, besteht darin, nur die Elemente zu zählen, die Ihre App kennt. Dann könnte eine Erweiterung enden Ihre App zu brechen. Sie können testen, ob eine Erweiterung Probleme verursacht, indem Sie einen Browser oder eine Konfiguration verwenden, auf der keine Erweiterungen installiert sind, oder indem Sie einfach in den "Porno-Modus" wechseln (Incognito on Chromium (Ctrl+Shift+n), Privates Surfen in Firefox (Ctrl+Shift+p)) wenn Sie keine Erweiterungen aktiviert haben.

  3. Javascript-Bibliotheken hängen auch Elemente an das DOM an. Sie sollten deren Höhe nicht mitzählen.

Um diese Probleme zu lösen, können Sie versuchen , damit es mit dem gesamten Word funktioniert (CoffeeScript mit Underscore.js):

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

Dasselbe gilt für Javascript und jQuery.fn.each:

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

Oder Sie können nur die Elemente berücksichtigen, die Sie kennen (ich bevorzuge das, das andere, das ich für die Herausforderung codiert habe):

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

Ersetzen Sie einfach das Codesegment für das Anbringen im Bootstrap wie unten angegeben.

Das geht - 

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

und das ersetzt es 

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

Prost.

0
Rohan

Ihre Geige scheint wie gewünscht zu funktionieren, wenn Sie die Fenstergröße auf der Geige etwas erhöhen. In Anbetracht der Tatsache, dass die Website in den Dimensionen, in denen das Affix bricht, nicht verwendet werden kann, sollten Sie sie entweder ignorieren oder das Layout ändern, um mit dem kleineren Platz zu arbeiten, anstatt das Problem zu beheben. Der Bootstrap-Affix in der Dokumentation wird nicht für kleinere Auflösungen verwendet, und ich würde dem Beispiel folgen.

Eine mögliche Lösung besteht darin, die affix-bottom-Situation vollständig zu ignorieren, indem bottom: null wie folgt eingestellt wird:

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

Stellen Sie die Position des Menüs unten mit position und der Eigenschaft top und bottom ein und verwenden Sie die Demo hier http://www.tutorialspark.com/twitterBootstrap/TwitterBootstrap_Affix.php

0
user2719087

Ich habe diese Arbeit durch einen Versuchs- und Fehlerprozess gemacht, aber das hat bei mir funktioniert.

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
}

Nach diesem Code wird meine Seitenleiste "unpinned", wenn sie die Fußzeile erreicht. Wenn Sie die Option für den unteren Versatz erreichen, können Sie nicht mehr zum oberen Rand der Website springen.

0
Oksana Romaniv

Stellen Sie position: absolute für .affix-top & .affix-bottom und position: fixed für .affix ein.

Laut offiziellen doc

0
Stream Huang