Как создать сворачивающийся логотип div над фиксированной навигационной панелью бутстрага

Question

Мне нужно создать div с полной шириной страницы, которая может содержать фоновое изображение и изображение логотипа, которое уменьшается по размеру при прокрутке вниз. Я пробовал несколько попыток, но, похоже, не мог его взломать. Прекрасный пример этого в исполнении можно найти здесь: http://www.starwars.com/

EDIT: Руководит получить что-то работает в настоящее время, но, как я прокручиваю обратно вверх, Navbar одушевляет страницу вниз кратко, показывая слой ниже в Z-индексе что он не будет показывать, когда он достигнет дна.

$(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"); 
} 
}); 

Есть ли причина, по которой произошел бы какой-то анимированный переход между сменой классов?

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(); 
    } 
}); 

Вот codepen, который делает то, что вы хотите (это не мой код, но Том Durkin в) вопрос уже адресован как на SO и Google. Вы должны рассмотреть возможность маркировки его как дубликата ...