Moving an image from the top of the navbar to the navbar when scrolling

Question

Just as I explained in the title, I want to move image to a sticky-top bootstrap navbar when scrolling. I have a mock-up code down here:

 .mainlogo{ display: block; margin-left: auto; margin-right: auto; width: 50%; } /* header */.navbar{ height: 100px; background-color: #0D4671; }.img{ display: inline; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="styles/main.css"> <div class="container"> <div class="mainlogo"> <img src="https://images.pexels.com/photos/1098662/pexels-photo-1098662.jpeg" alt="" class=" w-100"> </div> </div> <nav class="navbar sticky-top navbar-expand-lg"> <div class="container"> <a class="navbar-brand" href="#"> <img src="https://images.pexels.com/photos/1098662/pexels-photo-1098662.jpeg" alt="" width="30" height="30" class="logo"> A Car </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> </div> </nav> <div class="container"> <h1>Loremlorem</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui atque magni consectetur, Modi, quia inventore, voluptates eligendi at ipsum commodi perferendis neque? incidunt fugit cupiditate labore molestiae omnis nihil. Voluptatibus.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, Qui atque magni consectetur, Modi, quia inventore? voluptates eligendi at ipsum commodi perferendis neque. incidunt fugit cupiditate labore molestiae omnis nihil. Voluptatibus,</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, Qui atque magni consectetur, Modi? quia inventore. voluptates eligendi at ipsum commodi perferendis neque. incidunt fugit cupiditate labore molestiae omnis nihil, Voluptatibus,</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, Qui atque magni consectetur? Modi. quia inventore. voluptates eligendi at ipsum commodi perferendis neque, incidunt fugit cupiditate labore molestiae omnis nihil, Voluptatibus,</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit? Qui atque magni consectetur. Modi. quia inventore, voluptates eligendi at ipsum commodi perferendis neque, incidunt fugit cupiditate labore molestiae omnis nihil, Voluptatibus?</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui atque magni consectetur. Modi, quia inventore, voluptates eligendi at ipsum commodi perferendis neque, incidunt fugit cupiditate labore molestiae omnis nihil? Voluptatibus.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui atque magni consectetur, Modi, quia inventore, voluptates eligendi at ipsum commodi perferendis neque? incidunt fugit cupiditate labore molestiae omnis nihil. Voluptatibus.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, Qui atque magni consectetur, Modi, quia inventore? voluptates eligendi at ipsum commodi perferendis neque. incidunt fugit cupiditate labore molestiae omnis nihil. Voluptatibus,</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, Qui atque magni consectetur, Modi? quia inventore. voluptates eligendi at ipsum commodi perferendis neque. incidunt fugit cupiditate labore molestiae omnis nihil, Voluptatibus,</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, Qui atque magni consectetur? Modi. quia inventore. voluptates eligendi at ipsum commodi perferendis neque, incidunt fugit cupiditate labore molestiae omnis nihil, Voluptatibus,</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit? Qui atque magni consectetur. Modi. quia inventore, voluptates eligendi at ipsum commodi perferendis neque, incidunt fugit cupiditate labore molestiae omnis nihil, Voluptatibus?</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui atque magni consectetur. Modi, quia inventore, voluptates eligendi at ipsum commodi perferendis neque, incidunt fugit cupiditate labore molestiae omnis nihil? Voluptatibus.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui atque magni consectetur, Modi, quia inventore, voluptates eligendi at ipsum commodi perferendis neque? incidunt fugit cupiditate labore molestiae omnis nihil. Voluptatibus.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, Qui atque magni consectetur, Modi, quia inventore? voluptates eligendi at ipsum commodi perferendis neque. incidunt fugit cupiditate labore molestiae omnis nihil. Voluptatibus,</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, Qui atque magni consectetur, Modi? quia inventore. voluptates eligendi at ipsum commodi perferendis neque. incidunt fugit cupiditate labore molestiae omnis nihil, Voluptatibus,</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, Qui atque magni consectetur? Modi. quia inventore. voluptates eligendi at ipsum commodi perferendis neque, incidunt fugit cupiditate labore molestiae omnis nihil, Voluptatibus,</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit? Qui atque magni consectetur. Modi. quia inventore, voluptates eligendi at ipsum commodi perferendis neque, incidunt fugit cupiditate labore molestiae omnis nihil, Voluptatibus?</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui atque magni consectetur. Modi, quia inventore, voluptates eligendi at ipsum commodi perferendis neque, incidunt fugit cupiditate labore molestiae omnis nihil? Voluptatibus.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui atque magni consectetur, Modi, quia inventore, voluptates eligendi at ipsum commodi perferendis neque? incidunt fugit cupiditate labore molestiae omnis nihil. Voluptatibus.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, Qui atque magni consectetur, Modi, quia inventore? voluptates eligendi at ipsum commodi perferendis neque. incidunt fugit cupiditate labore molestiae omnis nihil. Voluptatibus,</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, Qui atque magni consectetur, Modi? quia inventore. voluptates eligendi at ipsum commodi perferendis neque. incidunt fugit cupiditate labore molestiae omnis nihil, Voluptatibus,</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, Qui atque magni consectetur? Modi. quia inventore, voluptates eligendi at ipsum commodi perferendis neque, incidunt fugit cupiditate labore molestiae omnis nihil? Voluptatibus.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui atque magni consectetur! Modi, quia inventore, voluptates eligendi at ipsum commodi perferendis neque, incidunt fugit cupiditate labore molestiae omnis nihil? Voluptatibus.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui atque magni consectetur! Modi, quia inventore, voluptates eligendi at ipsum commodi perferendis neque, incidunt fugit cupiditate labore molestiae omnis nihil? Voluptatibus.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui atque magni consectetur! Modi, quia inventore, voluptates eligendi at ipsum commodi perferendis neque, incidunt fugit cupiditate labore molestiae omnis nihil? Voluptatibus.</p> </div>

As you can see there is a car image at the top of navbar. All I want to do is when I scroll down and when navbar sticks top, image moves to the the navbar brand location.

So is there a way to do this? Thanks for any help in advance!

Answer 1

You may achieve this using a bit of javascript. Just check whenever navbar offsetTop is 0 and then move the image. You may do this using scroll event or even better for performance - with Intersection Observer

Anyway if image will be the same I don 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 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 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 have 2 same request, so nothing to worry about from that point of view.