正如标题中所述，我想在滚动时将图像移动到sticky-top引导导航栏中。我这里有一个模拟代码：
.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>
有没有办法做到这一点？感谢您的任何事先帮助！
答案 0 :(得分：0)
您可以使用一些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没有两个相同的请求，因此从该角度来看，无需担心。