到达 affix-bottom 并滚动回顶部后，Affix Bootstrap 闪烁
Affix Bootstrap flickers after affix-bottom reached and scrolling back top
我有一个小型单页布局网站，它使用 Bootstrap 的 Affix-Plugin 来修复 sidenav - affix-top/affix-switch 按预期工作正常，但如果我到达词缀 -底部我有 2 个问题：
首先：sidenav 在第 10 个列表项之前被切断
second：如果我滚动回到顶部，词缀-底部和词缀-类 会结结巴巴。词缀底部被移除，词缀被添加，并且在几毫秒内反过来。
标记：
<div class="page">
<main>
<section class="scenecontainer intern bright">
<div class="container overlay">
<div class="row">
<div class="col-md-12">
<h2>Wissensdatenbank</h2>
</div>
</div>
<div class="row unmatch">
<div class="col-sm-9">
<h3>Überpunkt Wissendatenbank</h3>
<p>Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext.</p>
<p>Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden.</p>
<p>Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich.</p>
<p>Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben.</p>
<p>Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren.</p>
<p>Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder die Darstellung auf einem Handy geeignet ist. Wohlgemerkt: Eine Seite für alle Formate. Was für eine Erleichterung.</p>
<p>Standards sparen Zeit bei den Entwicklungskosten und sorgen dafür, dass sich Webseiten später leichter pflegen lassen. Natürlich nur dann, wenn sich alle an diese Standards halten. Das gilt für Browser wie Firefox, Opera, Safari und den Internet Explorer ebenso wie für die Darstellung in Handys.</p>
<p>Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!</p>
<p>Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!</p>
<p>Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!</p>
<p>Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!</p>
<p>Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!</p>
<p>Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!</p>
<p>Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!</p>
<p>Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!</p>
<p>Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!</p>
<p>Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!</p>
<p>Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!</p>
<p>Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!</p>
<p>Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!</p>
<p>Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!</p>
</div>
<div class="col-sm-3">
<nav class="sidebar hidden-print hidden-xs">
<ul class="nav sidenav">
<li class="active parent">
<a href="#">Überpunkt 1</a>
<ul class="subnav">
<li><a href="#">Unterpunkt 1</a></li>
<li><a href="#">Unterpunkt 2</a></li>
<li><a href="#">Unterpunkt 3</a></li>
<li><a href="#">Unterpunkt 4</a></li>
</ul>
</li>
<li><a href="#">Menüpunkt 2</a></li>
<li><a href="#">Menüpunkt 3</a></li>
<li><a href="#">Menüpunkt 4</a></li>
<li><a href="#">Menüpunkt 5</a></li>
<li><a href="#">Menüpunkt 6</a></li>
<li><a href="#">Menüpunkt 7</a></li>
<li><a href="#">Menüpunkt 8</a></li>
<li><a href="#">Menüpunkt 9</a></li>
<li><a href="#">Menüpunkt 10</a></li>
</ul>
</nav>
</div>
</div>
</div>
</section>
<section class="scenecontainer intern bright">
<div class="container overlay">
<div class="row">
<div class="col-sm-12">
<form id="fileupload" class="form-horizontal" action="#" method="POST" enctype="multipart/form-data">
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-4" for="nachname">Nachname:</label>
<div class="col-sm-8">
<input id="nachname" name="nachname" type="text" placeholder="placeholder" class="form-control input-sm">
<span class="help-block">Bitte geben Sie Ihren Nachnamen ein.</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-4" for="vorname">Vorname:</label>
<div class="col-sm-8">
<input id="vorname" name="vorname" type="text" placeholder="placeholder" class="form-control input-sm">
<span class="help-block">Bitte geben Sie Ihren Vornamen ein.</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-4" for="email">E-Mail:</label>
<div class="col-sm-8">
<input id="email" name="email" type="email" placeholder="placeholder" class="form-control input-sm">
<span class="help-block">Bitte geben Sie Ihre E-Mail Adresse ein.</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-4" for="selectbasic">Für welche Seminargruppe?</label>
<div class="col-sm-8">
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
</div>
<!-- Multiple Checkboxes -->
<div class="form-group">
<label class="col-sm-4">Freigabe für folgende User:</label>
<div class="col-sm-8">
<div class="checkbox">
<label for="checkboxes0">
<input type="checkbox" name="checkboxes" id="checkboxes0" value="1">
Erika Mustermann
</label>
</div>
<div class="checkbox">
<label for="checkboxes1">
<input type="checkbox" name="checkboxes" id="checkboxes1" value="2">
Max Mustermann
</label>
</div>
</div>
</div>
</fieldset>
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="col-lg-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Datei auswählen</span>
<input type="file" name="files[]" multiple>
</span>
<button type="submit" class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</main>
</div>
js（词缀）：
var target = $(".sidebar").closest("div");
target.attr("id", "affixcontainer");
var bottom = $("#affixcontainer").closest(".scenecontainer").next(".scenecontainer").outerHeight(true);
$(".sidebar").affix({
offset: {
top: $(".sidebar").offset().top,
//target: $("#affixcontainer"),
bottom: bottom
}
});
jsfiddle：https://jsfiddle.net/3xL6cfe0/
我认为闪烁是由于滚动时应用的绝对定位造成的。这可以通过在应用 affix 时调整宽度来解决。
.on('affix.bs.affix', function () { // before affix
$(this).css({'width': $(this).outerWidth()}); // variable widths
});
为了防止导航被切断，添加一些额外的 CSS:
.sidebar.affix > .nav {
position: relative;
top: 0;
}
.sidebar.affix-bottom > .nav {
position: relative;
top: -100px;
}
我有一个小型单页布局网站，它使用 Bootstrap 的 Affix-Plugin 来修复 sidenav - affix-top/affix-switch 按预期工作正常，但如果我到达词缀 -底部我有 2 个问题：
首先：sidenav 在第 10 个列表项之前被切断
second：如果我滚动回到顶部，词缀-底部和词缀-类 会结结巴巴。词缀底部被移除，词缀被添加，并且在几毫秒内反过来。
标记：
<div class="page">
<main>
<section class="scenecontainer intern bright">
<div class="container overlay">
<div class="row">
<div class="col-md-12">
<h2>Wissensdatenbank</h2>
</div>
</div>
<div class="row unmatch">
<div class="col-sm-9">
<h3>Überpunkt Wissendatenbank</h3>
<p>Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext.</p>
<p>Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden.</p>
<p>Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich.</p>
<p>Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben.</p>
<p>Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite den größten Nutzen ziehen. Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren.</p>
<p>Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz funktioniert, aber ebenso gut für den Ausdruck oder die Darstellung auf einem Handy geeignet ist. Wohlgemerkt: Eine Seite für alle Formate. Was für eine Erleichterung.</p>
<p>Standards sparen Zeit bei den Entwicklungskosten und sorgen dafür, dass sich Webseiten später leichter pflegen lassen. Natürlich nur dann, wenn sich alle an diese Standards halten. Das gilt für Browser wie Firefox, Opera, Safari und den Internet Explorer ebenso wie für die Darstellung in Handys.</p>
<p>Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!</p>
<p>Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!</p>
<p>Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!</p>
<p>Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!</p>
<p>Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!</p>
<p>Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!</p>
<p>Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!</p>
<p>Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!</p>
<p>Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!</p>
<p>Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!</p>
<p>Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!</p>
<p>Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!</p>
<p>Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!</p>
<p>Und was können Sie für Standards tun? Fordern Sie von Ihren Designern und Programmieren einfach standardkonforme Webseiten. Ihr Budget wird es Ihnen auf Dauer danken. Ebenso möchte ich Ihnen dafür danken, dass Sie mich bin zum Ende gelesen haben. Meine Mission ist erfüllt. Ich werde hier noch die Stellung halten, bis der geplante Text eintrifft. Ich wünsche Ihnen noch einen schönen Tag. Und arbeiten Sie nicht zuviel!</p>
</div>
<div class="col-sm-3">
<nav class="sidebar hidden-print hidden-xs">
<ul class="nav sidenav">
<li class="active parent">
<a href="#">Überpunkt 1</a>
<ul class="subnav">
<li><a href="#">Unterpunkt 1</a></li>
<li><a href="#">Unterpunkt 2</a></li>
<li><a href="#">Unterpunkt 3</a></li>
<li><a href="#">Unterpunkt 4</a></li>
</ul>
</li>
<li><a href="#">Menüpunkt 2</a></li>
<li><a href="#">Menüpunkt 3</a></li>
<li><a href="#">Menüpunkt 4</a></li>
<li><a href="#">Menüpunkt 5</a></li>
<li><a href="#">Menüpunkt 6</a></li>
<li><a href="#">Menüpunkt 7</a></li>
<li><a href="#">Menüpunkt 8</a></li>
<li><a href="#">Menüpunkt 9</a></li>
<li><a href="#">Menüpunkt 10</a></li>
</ul>
</nav>
</div>
</div>
</div>
</section>
<section class="scenecontainer intern bright">
<div class="container overlay">
<div class="row">
<div class="col-sm-12">
<form id="fileupload" class="form-horizontal" action="#" method="POST" enctype="multipart/form-data">
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-4" for="nachname">Nachname:</label>
<div class="col-sm-8">
<input id="nachname" name="nachname" type="text" placeholder="placeholder" class="form-control input-sm">
<span class="help-block">Bitte geben Sie Ihren Nachnamen ein.</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-4" for="vorname">Vorname:</label>
<div class="col-sm-8">
<input id="vorname" name="vorname" type="text" placeholder="placeholder" class="form-control input-sm">
<span class="help-block">Bitte geben Sie Ihren Vornamen ein.</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-4" for="email">E-Mail:</label>
<div class="col-sm-8">
<input id="email" name="email" type="email" placeholder="placeholder" class="form-control input-sm">
<span class="help-block">Bitte geben Sie Ihre E-Mail Adresse ein.</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-4" for="selectbasic">Für welche Seminargruppe?</label>
<div class="col-sm-8">
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
</div>
<!-- Multiple Checkboxes -->
<div class="form-group">
<label class="col-sm-4">Freigabe für folgende User:</label>
<div class="col-sm-8">
<div class="checkbox">
<label for="checkboxes0">
<input type="checkbox" name="checkboxes" id="checkboxes0" value="1">
Erika Mustermann
</label>
</div>
<div class="checkbox">
<label for="checkboxes1">
<input type="checkbox" name="checkboxes" id="checkboxes1" value="2">
Max Mustermann
</label>
</div>
</div>
</div>
</fieldset>
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="col-lg-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Datei auswählen</span>
<input type="file" name="files[]" multiple>
</span>
<button type="submit" class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</main>
</div>
js（词缀）：
var target = $(".sidebar").closest("div");
target.attr("id", "affixcontainer");
var bottom = $("#affixcontainer").closest(".scenecontainer").next(".scenecontainer").outerHeight(true);
$(".sidebar").affix({
offset: {
top: $(".sidebar").offset().top,
//target: $("#affixcontainer"),
bottom: bottom
}
});
jsfiddle：https://jsfiddle.net/3xL6cfe0/
我认为闪烁是由于滚动时应用的绝对定位造成的。这可以通过在应用 affix 时调整宽度来解决。
.on('affix.bs.affix', function () { // before affix
$(this).css({'width': $(this).outerWidth()}); // variable widths
});
为了防止导航被切断，添加一些额外的 CSS:
.sidebar.affix > .nav {
position: relative;
top: 0;
}
.sidebar.affix-bottom > .nav {
position: relative;
top: -100px;
}