web-dev-qa-db-ja.com

スクロール時にフローティングモジュール?

その位置に(そしてその位置にのみ)浮いているモジュールを作成する方法はありますか?

http://aebb.es/4 ここで、スクロール中に常にオプトインモジュールを右側に固定して、ページの上部にフロートさせたいと思います。ただし、モジュールはスクロール時に「サイドバー右」の位置を離れることはありません。

CSS3で解決できるかどうか考えていましたか?他のソリューションにも対応

3
laendle

これを実現するには、以下を使用します(最初に30%のサイドバーをフェッチし、ページ上で可視性を定義します)。

.g-block.size-30 #g-aside {
    position: sticky;
    top: 50px;
}

#g-page-surround {
    overflow: visible;
}

親要素のいずれかにstickyオーバーフローがある場合、hiddenの位置は機能しないため、コードの2番目のブロックは小さな修正です。

お役に立てれば

2
Lodder