在彈出式窗口中滾動時如何固定圖像？

Question

我有一個帶有fancybox彈出窗口的畫廊。 在Fancybox彈出窗口中，我想在左側顯示圖片，在右側顯示一些文本。 如果文本太長，那么您應該可以向下滾動。 在這種情況下，應將左側圖像固定在花式框的左上角，並且僅滾動文本。

我嘗試了帶有position:fixed和background-position:fixed 。 但是，由於總是從視口中計算固定屬性，因此圖像的某些部分隱藏在了花式框之外。 Fancybox版本：2.1.4這是我的網站： http ://tinyurl.com/bl7do5e

如何在 fancybox彈出窗口中修復左側的圖像？

Answer 1

圖像的CSS應該將位置設置為相對，但是相對標記是指其上方div的位置狀態。 它應該可以在這些映像上運行，但是如果您在調試時遇到問題，請在將來查找。

.sticker {
    position: relative;
    top: 0px;
    left: 0px;
    display: block;
}

至於滾動文本框，您可以使用

div.item-page-contents {
    min-width: 100px;
    overflow: scroll;
}

這將為您提供滾動條，但您需要弄亂包含文本的div的大小，以使其正確適合。 另外，如果希望滾動條消失，則可以將文本框div包裹在另一個帶有div較小的div中，該div帶有溢出：隱藏以使其消失，同時保留滾輪。

渲染效果很棒，這是您的工作嗎？

編輯：精美的包裝盒有一個內聯css規則，該規則說，如果包裝盒中的物品太大，則會使整個包裝盒（包括圖片）滾動，但是只要您小心謹慎，如何將所容納的元素放進去就可以了沒有那個問題。 Joomla或精美的外掛程式插件也可以禁用此功能。 我以前從未使用過它們，所以不確定。

div.item-page-contents {
    width: 275px;
    float: right;
    height: 350px;
    overflow-y: scroll;
    overflow-x: hidden;
}