Sticky Floating Bar: genaue Position

Ich bin auf der Suche nach einer besseren Lösung für Sticky Bar Problem.Sticky Floating Bar: genaue Position

Die '-----' zwischen 2. & 3. Box ist ein Schwellenwert, ab dem die klebrige Leiste angezeigt werden soll. Wenn es angezeigt wird, überlappt es die dritte Box vollständig.

In der realen Lösung habe ich css (margin-top) mit jQuery hinzugefügt, um dieses Element darunter zu schieben; aber das Problem ist, dass es in Firefox nachläuft. Man kann diesen Bereich für Sekundenbruchteile auf UI sehen.

Was ist die beste Lösung, um die Ausgabe zu erzielen (oder Margin-Top zu vermeiden)?

$(document).ready(function(){ 
 
    
 
    function toggleDock() { 
 
    
 
    if($(window).scrollTop() >= $('.second').offset().top+$('.second').height()) { 
 
     $('.sticky').show(); 
 
    } 
 
    else { 
 
     $('.sticky').hide(); 
 
    } 
 
    } 
 
    
 
    $(window).bind('scroll',toggleDock); 
 
});

.box { 
 
    border: 1px dotted red; 
 
    height: 100px; 
 
    width: auto; 
 
    margin: 20px 0; 
 
} 
 
.sticky { 
 
    height: 80px; 
 
    border: 1px dotted green; 
 
    margin: 20px 0; 
 
    display: none; 
 
    position: sticky; 
 
    top: 20px; 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body class='page docked'> 
 
<div class='sticky'> 
 
</div> 
 
    
 
<div class='box'> 
 
    First 
 
</div> 
 
<div class='box second' > 
 
    2nd 
 
</div> 
 

 
    ------- 
 
<div class='box'> 
 
    3rd 
 
</div> 
 
<div class='box'> 
 
    4th 
 
</div> 
 
<div class='box'> 
 
    5th 
 
</div> 
 
<div class='box'> 
 
    6th 
 
</div> 
 
<div class='box'> 
 
    7th 
 
</div> 
 
<div class='box'> 
 
    8th 
 
</div> 
 
    
 
    
 
</body>

Quelle

2017-12-19 Robin

AKTUALISIERT ANTWORT

Ich glaube, Sie brauchen Ihre sticky div im normalen Fluss zu halten, und position: sticky ist wahrscheinlich nicht die richtige Wahl hier. Hier ein Beispiel:

$(document).ready(function(){ 
 
    
 
    function toggleDock() { 
 
    
 
    if($(window).scrollTop() >= $('.second').offset().top+$('.second').height()) { 
 
     $('.sticky').show(); 
 
    } 
 
    else { 
 
     $('.sticky').hide(); 
 
    } 
 
    } 
 
    
 
    $(window).bind('scroll',toggleDock); 
 
});

.box { 
 
    border: 1px dotted red; 
 
    height: 100px; 
 
    width: auto; 
 
    margin: 20px 0; 
 
} 
 
.sticky { 
 
    height: 100px; 
 
    border: 1px dotted green; 
 
    margin: 20px 0; 
 
    top: 40px; 
 
    display: none; 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body class='page docked'> 
 
    
 
<div class='box'> 
 
    First 
 
</div> 
 
<div class='box second' > 
 
    2nd 
 
</div> 
 

 
    ------- 
 
<div class='sticky'> 
 
</div> 
 

 
<div class='box'> 
 
    3rd 
 
</div> 
 
<div class='box'> 
 
    4th 
 
</div> 
 
<div class='box'> 
 
    5th 
 
</div> 
 
<div class='box'> 
 
    6th 
 
</div> 
 
<div class='box'> 
 
    7th 
 
</div> 
 
<div class='box'> 
 
    8th 
 
</div> 
 
    
 
    
 
</body>

Ein schönes Dokument über CSS Flow: http://marksheet.io/css-the-flow.html

position: sticky ist dort nicht detailliert, sondern von this document, werden Sie sehen, dass ein sticky Element positioniert ist, relativ zu seinem enthaltenden Element, wenn es sichtbar ist, und wird fixed (das heißt, es ist aus dem normalen Dokumentfluss herausgenommen), wenn sein enthaltendes Element nicht sichtbar ist:

Ein klebrig positioniertes Element ist ein Element, dessen berechneter Positionswert klebrig ist. Es wird als relativ positioniert behandelt, bis sein umschließender Block einen bestimmten Schwellenwert überschreitet. An diesem Punkt wird es als fixiert behandelt.

Hoffe, das hilft!

Quelle

2017-12-20 11:51:31

Entschuldigung .. aber es scheint, dass ich nicht in der Lage war zu sagen, was die gewünschte Erwartung ist. Wenn Sie beobachtet haben, wenn Sticky angezeigt wird, sollte es die dritte Box darunter schieben und etwas Platz für die Sticky machen. Was gerade oder in meiner Lösung passiert, überlappt die dritte Box. Das ist nicht was ich will. – Robin

Hallo @Robin, ich denke ich verstehe es besser. Können Sie das aktualisierte Code-Snippet ausprobieren? Es versetzt das 'sticky'-div in den normalen Ablauf zurück und verwendet die' hide/show'-Funktionen, die intern die 'display'-CSS-Eigenschaft umschalten. –

Dies ist zu position: sticky fällig. Mit position: fixed alternativ wird Ihnen helfen.

.sticky { 
    height: 80px; 
    border: 1px dotted green; 
    margin: 20px 0; 
    display: none; 
    top: 20px; 
    background: green; 

    position: fixed; 
    width: calc(100% - 40px); /* subtract the 20px taken by the left and right margins */

}

Quelle

2017-12-20 06:31:01

Nein Es funktioniert nicht. – Robin

Sticky Floating Bar: genaue Position

Antwort

Verwandte Themen