Erstellen eines kollabierenden Logo-DIV über einer festen Bootstrap-Navigationsleiste

Question

Ich muss ein Div mit voller Seitenbreite erstellen, das ein Hintergrundbild und ein Logo-Bild aufnehmen kann, das beim Scrollen nach unten kleiner wird. Ich habe ein paar Versuche versucht, aber ich kann es nicht kaputt machen. Ein perfektes Beispiel für diese in der Ausführung finden Sie hier: http://www.starwars.com/

EDIT: Leitet etwas arbeiten jetzt zu bekommen, aber als ich wieder nach oben bewegen, belebt die navbar die Seite kurz nach unten, um eine Schicht unterhalb in der z-Index zeigt, dass es nicht zeigen würde, wenn es den Boden erreicht.

$(window).scroll(function() { 
var scroll = $(window).scrollTop(); 
var objectSelect = $("#contentcollapse"); 
var objectPosition = objectSelect.offset().top; 
if (scroll > 400) { 
    $(".navscroll").addClass("navstick"); 
    $(".navstick").removeClass("navscroll"); 
} else { 
    $(".navstick").addClass("navscroll"); 
    $(".navscroll").removeClass("navstick"); 
} 
}); 

Gibt es einen Grund, warum es zwischen dem Wechsel der Klassen eine Art animierte Übergang wäre?

Answer 1

https://codepen.io/tomdurkin/pen/nvAjd

$(document).on("scroll", function(){ 
    if 
    ($(document).scrollTop() > 100){ 
     $("header").addClass("shrink"); 
     updateSliderMargin(); 
    } 
    else 
    { 
     $("header").removeClass("shrink"); 
     updateSliderMargin(); 
    } 
}); 

Hier ist ein codepen das tut, was Sie wollen (das ist nicht meinen Code aber Tom Durkin ist) Die Frage bereits sowohl auf SO und auf Google angesprochen wurde. Sie sollten Kennzeichnung als Duplikat betrachten ...