Перемещение изображения из верхней части навигационной панели на навигационную панель при прокрутке

Question

Как я объяснил в заголовке, я хочу переместить изображение на панель навигации sticky-top bootstrap при прокрутке. Здесь у меня есть макет кода:

.mainlogo{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

/* header */

.navbar{
   
    height: 100px;
    background-color: #0D4671;
}
.img{
    display: inline;
}

Как видите, в верхней части панели навигации есть изображение автомобиля. Все, что я хочу сделать, это когда я прокручиваю вниз и когда навигационная панель застревает наверху, изображение перемещается в местоположение бренда навигационной панели.

Так есть ли способ сделать это? Заранее благодарим за любую помощь!

Answer 1

Вы можете достичь этого, используя бит javascript. Просто проверьте, когда на панели навигации offsetTop установлено значение 0, а затем переместите изображение. Вы можете сделать это с помощью события scroll или даже лучше для производительности - с помощью Intersection Observer

В любом случае, если изображение будет таким же, у меня нет t see why you would want to move it ? This will take repaint, reflow of your page which is not optimal for performance. If both images are the same - the request for them will be cached and you wouldn t двух одинаковых запросов, поэтому не о чем беспокоиться точка зрения.