Stop feste Position an bestimmten div oder bestimmten Position

Ich muss ein div, das eine feste Position auf Scroll erhält, bevor es ein anderes Element berührt, im Grunde gehen es zurück zur absoluten Position an einer bestimmten Position, und dies sollte bei arbeiten jede Größe des Bildschirms. Ich habe ein Problem mit Code und es gibt zwei Elemente, bitte sehen Sie das Beispiel und Hilfe, wenn Sie die Antwort wissen, danke!Stop feste Position an bestimmten div oder bestimmten Position

var navTop = $('#nav').offset().top; 
var lastMode = "absolute"; 

$(window).scroll(function(){ 
var mode; 
if ($(this).scrollTop() >= navTop) { 
    mode = 'fixed'; 
} else { 
    mode = 'absolute'; 
} 

if(lastMode !== mode) { 
    if (mode == 'fixed') { 
     $('#nav').css('position', 'fixed'); 
     $('#nav').css('top', '0'); 
    } else { 
     $('#nav').css('position', 'absolute'); 
     $('#nav').css('top', navTop); 
    } 
    lastMode = mode; 
} 
});

https://jsfiddle.net/Zygimantas10/vro3LLu9/

lassen Sie mich wissen, wenn dies nicht klar ist.

Quelle

2017-07-26 Z3K

Gefällt mir?

var navTop = $('#nav').offset().top; 
 
var navStop = $('#stop').offset().top; 
 
var lastMode = "absolute"; 
 

 
$(window).scroll(function() { 
 
    var mode; 
 
    if ($(this).scrollTop() >= navTop) { 
 
    if ($(this).scrollTop() - navStop + $('#nav').height() > 0) 
 
     mode = 'absolute'; 
 
    else 
 
     mode = 'fixed'; 
 
    } else { 
 
    mode = 'absolute'; 
 
    } 
 

 
    if (lastMode !== mode) { 
 
    if (mode == 'fixed') { 
 
     $('#nav').css('position', 'fixed'); 
 
     $('#nav').css('top', '0'); 
 
    } else { 
 
     $('#nav').css('position', 'absolute'); 
 
     $('#nav').css('top', navTop); 
 
    } 
 
    lastMode = mode; 
 
    } 
 
});

#nav { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    position: absolute; 
 
    top: 200px; 
 
    width: 100px; 
 
    height: 50px; 
 
} 
 

 
#stop { 
 
    width: 100%; 
 
    background: blue; 
 
    height: 300px; 
 
    position: absolute; 
 
    top: 900px; 
 
    margin-top: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body style="height:5000px;"> 
 
    <div id="nav"></div> 
 
    <div id="stop"></div> 
 
</body>

Quelle

2017-07-26 13:37:24 Cylexx

Ihr Snippet Fehler gibt, könnten Sie überprüfen – Z3K

Edited, habe ich vergessen, JQuery Bibliotheken hinzufügen – Cylexx

ja ive verpasst, dass das ist, warum ich den Kommentar :) Dank für Ihre Hilfe schlecht es ausdrückte gelöscht wie gelöst – Z3K

Stop feste Position an bestimmten div oder bestimmten Position

Antwort

Verwandte Themen