如何在滾動時保持圖像的位置固定？

-2

我有一個在WordPress中製作的網站。我網頁上的所有內容都被封裝在一個div中。我現在想要做的是在內容的兩邊添加橫幅，並在滾動時保持固定。

因此，橫幅的頂部應與頂部對齊。
左側橫幅的右側應該緊挨着主要內容的左側。
右側橫幅的左側應該緊挨着主要內容的左側。

因此，我會從左到右獲取所有元素：左橫幅 - >內容 - >右橫幅。全部對齊在頂部。當我滾動頁面時，只有內容會滾動而不是橫幅。

將橫幅固定在內容的邊上很重要，所以如果瀏覽器的寬度縮小，那麼部分橫幅會從屏幕上移出，而不是通過主內容的橫幅。如何在滾動時保持圖像的位置固定？

來源

2016-12-01 Amy

還有，你試過嗎？ – DaniP

它只取決於你的結構，如果廣告與內容分開，你可以在div定義中使用'position：fixed;'。更新你的問題與你的結構將有所幫助。 – Benoti

也許只是固定的位置不起作用，你可能需要JS根據最後一段來獲得你想要的。 – DaniP

解決他們

position:fixed;

對於對準他們對你有餘量的工作和浮動我猜頂。作爲例子左旗：

float:left;

現在你可以很容易地與利潤率的工作給他們合適的位置。我希望這就是你的意思？

來源

2016-12-01 14:09:26 Sundaze

假設橫幅已經有了一個class="banner banner-right"或class="banner banner-left"去

.banner { 
    position: fixed; 
    top: 0; /* or the distance from top page edge */ 
    max-height: 100%; 
} 
.banner-right { right: 0; } /* or the distance from right page edge */ 
.banner-left { left: 0; } /* or the distance from left page edge */

和橫幅會即使您滾動頁面的同一位置棒！ max-height是爲了防止橫幅比窗戶本身更長，從而隱藏內容;

你可能要添加overflow: auto;如果旗幟的內容變得很長

另一種解決方案沃爾德是設置

html, body { height: 100%; } 
.content { max-height: 100%; overflow: auto; }

在同一個地方使內容元素與一個滾動條，並留下標語

來源

2016-12-01 14:09:45 Giovazz89

你可以使用CSS。實際位置固定。這裏一個fiddle 例如：

.banner { 
     position:fixed; 
     width: 100px; 
     height: 100px; 
     background-color: mediumaquamarine; 
     top: 40px; 
    }

來源

2016-12-01 14:11:03 afmeva

您可以SE position: sticky像：

position: sticky; 
top: 5px;

來源

2018-02-26 00:38:32 TheProgrammedDev

如何在滾動時保持圖像的位置固定？

回答

相關問題