Fixierte Seitenleiste um 290 Pixel vom Ende der Seite scrollen lassen?
Lesezeit: 10 Minuten
J82
Ich versuche, eine Seitenleiste zu erstellen, die wie die auf Vice.com funktioniert. Wenn Sie nach unten scrollen, wird die Seitenleiste an einem bestimmten Punkt fixiert, und wenn die Seitenleiste dann einen bestimmten Punkt am unteren Rand der Website erreicht, wird sie mit dem Rest der Website weiter nach oben scrollen.
Auf meiner Website stecke ich im zweiten Teil fest, der die Seitenleiste dazu bringt, weiter nach oben zu scrollen, sobald sie sich dem unteren Rand nähert. 290px von unten um genau zu sein.
Hier ist, was ich bisher habe:
JavaScript
<script>
jQuery(window).scroll(function () {
var threshold = 20;
if (jQuery(window).scrollTop() >= 20)
jQuery('#sidebar').addClass('fixed');
else
jQuery('#sidebar').removeClass('fixed');
});
</script>
Wie kann ich die feste Seitenleiste nach oben scrollen lassen, sobald sie einen bestimmten Punkt nahe dem unteren Rand erreicht?
Bearbeiten #1
Hier ist der aktualisierte Code von Adam. Ich verwende eine bedingte Anweisung für die Seiten, die einen anderen Schwellenwert haben. Wenn ich diesen Code verwende, passiert nichts, was bedeutet, dass die Seitenleiste den nicht erhält fixed Klasse hinzugefügt und scrollt daher normal nach oben, als ob der Code gar nicht da wäre. Außerdem erhalte ich einen Konsolenfehler in dieser Zeile if (scrollTop() >= 236) { sagen, dass die “Nummer keine Funktion ist”.
Ich bin nicht überzeugt von der Struktur Ihrer Seite, daher ist meine Antwort etwas daneben, aber ich werde versuchen, sie zum Laufen zu bringen. Wenn Sie mir eine Geige machen können, könnte ich mich genauer informieren.
– Adam Merrifield
21. März 2014 um 3:09 Uhr
Aramil Rei
Mein Rat:
Erstellen Sie 2 CSS-Klassen mit den gewünschten Eigenschaften und schalten Sie beide nach Erreichen des Haltepunkts um, 1 muss zu Beginn aktiv sein.
Wie ich in meinem Kommentar sagte, ist dies möglicherweise deaktiviert, da ich die Struktur des HTML-Codes derzeit nicht sehen kann. Aber so etwas sollte funktionieren. Wir erhalten die Höhe der scrollbar, container(+ die Höhe der Kopfzeile) und die Höhe des sichtbaren Bereichs für den Benutzer oder die client. Also mit Mathematik können wir das sagen, wenn die container – scrollTop ist kleiner als die Höhe der scrollbar Wir brauchen die Bildlaufleiste, damit sie nicht mehr repariert wird. An diesem Punkt entfernen wir die feste Klasse und fügen die unterste Klasse hinzu, die nur 1 Eigenschaft hat. bottom: 0. Nun solange die Scrollbar innerhalb des Containers ist und der Container hat position: relative Der Boden wird am Boden des Behälters befestigt.
Lassen Sie mich wissen, wenn dies für Sie nicht funktioniert, und aktualisieren Sie Ihre Frage, um den HTML-Code zu erhalten, damit dies Ihren Anforderungen besser entspricht. Außerdem müssen Sie sich mit einem Benutzer befassen, der die Seite auch zurückscrollt, was dies derzeit nicht berücksichtigt, aber es wäre nicht schwer, es hinzuzufügen.
Ich habe mir das angeschaut und komme damit nicht klar. Ich weiß leider nicht viel über Bootstrap, aber das sieht so aus, als würde es das tun, wonach ich frage.
– J82
21. März 2014 um 11:23 Uhr
Entschuldigung, dass ich die Antwort vorerst nicht verbessern kann, ich bin auf meinem Handy, der Link ist für eine ältere Version von Bootstrap, für die neueste Version mit Anweisungen, siehe hier getbootstrap.com/javascript
– Lee Gary
21. März 2014 um 15:30 Uhr
versuchen Sie diesen Code (ich habe IDs gemäß Ihrem Markup verwendet):
Der Code, den Sie von Adam geliehen haben, wurde falsch kopiert. Sie verwenden scrollTop() anstelle von scrollTop. scrollTop ist auf eine Zahl gesetzt, also versuchen Sie im Grunde 20() (oder eine beliebige Zahl, auf die scrollTop gesetzt ist)
Bearbeiten: Um die Redundanz mit Ihrem Code zu reduzieren, habe ich ihn neu geschrieben, um den Schwellenwert über ternäre if-Anweisungen festzulegen:
<div class="main">
</div>
<div class="foot">
</div>
<div id="float">
<div class="float_content_head">
I was sending javascript to display
</div><div class="float_content">
d my issue was that I was sending javascript to display console messages. Even when I looked at the file in my browser (not through the application) it showed exactly as I expected it to (eg the extra tags weren't showing), but there were showing in the html/text output and were trying to be parsed. Hope this helps someone!I had a similar problem, and my issue was that I was sending tags we
</div>
</div>
Css
<style type="text/css">
#float{
background: #fff;
position:absolute;
right:30px;
top:20px;
width:250px;
padding:10px;
border-radius: 6px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.43);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.43);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.43);
}
.float_content_head{
padding:10px;
border-bottom: 1px solid #efefef;
text-align:center;
}
.float_content{
padding-top:10px;
}
.main{
width: 800px;
height: 800px;
margin: 0 auto;
border:1px solid #efefef;
padding: 10px;
background:#ccc;
}
.foot{
width: 100%;
height: 800px;
margin: 0 auto;
border:1px solid #efefef;
padding: 10px;
background:#096;
}
#box p{
margin:0;
padding:0;
}
</style>
JS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var starting_position = $('#float').offset();
var top_padding = 50;
var bottom_limit = $('.foot').offset();
var box_height = $('#float').height() + 20;
$(window).scroll(function(){
var top_window = $(window).scrollTop();
if (top_window > starting_position.top && top_window < bottom_limit.top - box_height){
$('#float').stop().animate({top: top_window - starting_position.top + top_padding}, 400);
} else if (top_window > bottom_limit.top - starting_position.top - box_height){
$('#float').stop().animate({top: bottom_limit.top - starting_position.top - box_height }, 400);
} else { $('#float').stop().animate({top: 10 }, 400);
}
});
});
</script>
$(document).ready(function() {
// Get the inital position of the menu
var initialPos = $('#mainnav').offset().top;
//Bind scrolling or resizing
$(window).bind('scroll resize', function() {
// Get the distance from the top of the page to the top of the footer
var footerTop = $('#footer').length > 0 ? $('#footer').offset().top : $('#footer').offset().top;
// Get the distance from the top of the page to the bottom of the menu
var navBottom = $(window).scrollTop() + $('#mainnav').height() + 22;
// If the user scrolls further than the height of the header (this method allows for resizing with a max-width layout)
if ($(window).scrollTop() > initialPos) {
$('#mainnav').css({
'position': 'fixed',
// move the menu based on how far the user has scrolled, and if it exceed the height of the footer
'top': (footerTop - navBottom > 0 ? 0 : footerTop - navBottom) + 'px',
'left': ($('#wrapper02').offset().left - $(window).scrollLeft()) + 'px'
});
} else {
$('#mainnav').css({
'position': 'static'
});
}
});
});
13955200cookie-checkFixierte Seitenleiste um 290 Pixel vom Ende der Seite scrollen lassen?yes
Ich bin nicht überzeugt von der Struktur Ihrer Seite, daher ist meine Antwort etwas daneben, aber ich werde versuchen, sie zum Laufen zu bringen. Wenn Sie mir eine Geige machen können, könnte ich mich genauer informieren.
– Adam Merrifield
21. März 2014 um 3:09 Uhr