滾動時將圖像從導航欄頂部移動到導航欄

Question

正如我在標題中解釋的那樣，我想在滾動時將圖像移動到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>

如您所見，導航欄頂部有一個汽車圖像。 我想做的就是當我向下滾動並且導航欄停留在頂部時，圖像會移動到導航欄品牌位置。

那么有沒有辦法做到這一點？ 提前感謝您的幫助！

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 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有 2 個相同的請求，所以從這個角度來看沒有什么可擔心的。