Stoppen Sie flackern, wenn Sie div dynamisch fixieren

Ich repariere ein div an der Unterseite des Fensters, sobald seine Position aus der Fensteransicht gescrollt ist. Ich 'fixiere' es dann, wenn die Position zurückgescrollt wird. Wenn das Scrollen langsam ausgeführt wird, gibt es ein schreckliches Flackern von Positionen. Gibt es eine Möglichkeit, dies zu bekämpfen?Stoppen Sie flackern, wenn Sie div dynamisch fixieren

DEMO https://jsfiddle.net/3146nxLx/

var initSet = false; 
$(window).scroll(function() { 
    if (isScrolledIntoView($('#myDivTrigger'))) { 
    if (!initSet) { 
     initSet = true; 
    } 
    $("#myDiv").removeClass('fixed'); 
    } else if (initSet) { 
    $("#myDiv").addClass('fixed'); 
    } 
}); 

function isScrolledIntoView(elem) { 
    var $elem = $(elem); 
    var $window = $(window); 

    var docViewTop = $window.scrollTop(); 
    var docViewBottom = docViewTop + $window.height(); 

    var elemTop = $elem.offset().top; 
    var elemBottom = elemTop + $elem.height(); 

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
}

Quelle

2016-04-12 Anonymous

Die _flick_ erfolgt becau Sie "entfernen" (zeitlich) ein Element im DOM-Fluss. –

Verwenden Sie einen sicheren Rand, der den Trick machen könnte –

Sie könnten ein Duplikat des von Ihnen festgelegten Duplikats (über js) nur an dieser Stelle erstellen/entfernen, wenn es behoben ist. –

ist dies, weil Sie ein festes Element setzen, dann wird die trigger Aufspringen in seinen Platz, damit sichtbar wird. Sie müssen einen Wrapper erstellen, ihm eine relative Position geben und dann den Trigger auf absolute Position setzen. Auf diese Weise wird die Position des Auslösers nicht verschoben, wenn sich die Position des festen Divs ändert.

DEMO https://jsfiddle.net/3146nxLx/1/

<div id="myDivWrap"> 
    <div id="myDiv"> 
    <p> 
     This should be fixed once it comes into view and then goes out of view. 
    </p> 
    </div> 
    <span id="myDivTrigger">trigger</span> 
</div>

Sie sogar den Auslöser einen bottom Wert so der Übergang glatter geben könnte. Ja und geben Sie auch einen linken Wert.

DEMO https://jsfiddle.net/3146nxLx/3/

Hier ist ein Beispiel, halb auf der Logik, wie durch @Lionel vorgeschlagen. Du klonst das Div und fügst es dann hinzu. Dies bedeutet auch, dass Sie keinen Auslöser benötigen.

DEMO https://jsfiddle.net/3146nxLx/4/

Quelle

2016-04-12 14:10:10 Vector

Dank Vektor - perfekt. Ich denke, ich werde mit Ihrem letzten Beispiel gehen, da es Einstellhöhen spart und Wrapper erstellt. –

Ja, das Problem ist bcz nach position: fixed; zu myDiv Browser entfernt sie aus normalen Fluss der DOM Einstellung ...

Sie Höhe an den Wrapper anwenden können und dann Scroll-Handler registrieren .. hier ist eine weitere mögliche Lösung ohne Klonen oder einen zusätzlichen Block verwenden ..

hier ist Fidde

Quelle

2016-04-12 14:47:44

Stoppen Sie flackern, wenn Sie div dynamisch fixieren

Antwort

Verwandte Themen