滚动时将图像从导航栏顶部移动到导航栏

Question

Just as I explained in the title, I want to move image to a sticky-top bootstrap navbar when scrolling.正如我在标题中解释的那样，我想在滚动时将图像移动到sticky-top引导导航栏。 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.您可以使用一点 javascript 来实现这一点。 Just check whenever navbar offsetTop is 0 and then move the image.只需检查导航栏offsetTop是否为 0，然后移动图像。 You may do this using scroll event or even better for performance - with Intersection Observer您可以使用scroll事件甚至更好的性能来执行此操作 - 使用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 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. 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有 2 个相同的请求，所以从这个角度来看没有什么可担心的。

滚动时将图像从导航栏顶部移动到导航栏

问题描述

1 个解决方案

解决方案1
0 2020-07-14 07:45:14

滚动时将图像从导航栏顶部移动到导航栏

问题描述

1 个解决方案

解决方案1 0 2020-07-14 07:45:14

解决方案1
0 2020-07-14 07:45:14