Web ページの右下にロゴを配置し、ページのコンテンツがスクロールしてもそこにとどまるように、CSS で絶対/固定位置を把握しようとしています。私はこれを半分達成しましたが、ブラウザ ウィンドウが小さい場合にロゴがページの上に移動しすぎないようにする必要があります。
私はそれがどのように機能するかについての図と簡単なメモを作成し、次のリンクに pdf として配置しました。
誰でも私を助けてもらえますか?
ゲイリー
Web ページの右下にロゴを配置し、ページのコンテンツがスクロールしてもそこにとどまるように、CSS で絶対/固定位置を把握しようとしています。私はこれを半分達成しましたが、ブラウザ ウィンドウが小さい場合にロゴがページの上に移動しすぎないようにする必要があります。
私はそれがどのように機能するかについての図と簡単なメモを作成し、次のリンクに pdf として配置しました。
誰でも私を助けてもらえますか?
ゲイリー
したがって、ロゴは である必要がありますposition: fixed
が、ビューポートの高さが事前定義された最小値よりも大きい場合に限られます。メディアクエリでそれを実現できます:
@media screen and (min-height: 300px) {
#logo {
position: fixed;
/* your other styles */
}
}
ライブ デモ: http://jsfiddle.net/KC3UU/show/light/ (画像がグレーの DIV と衝突するまでブラウザー ウィンドウの高さを下げます)
普通のCSSだけでは無理だと思います。(少なくとも、いくつかのクレイジーな CSS ハックを使用しなければ)。しかし、可能なはずのjqueryを使用すると、http: //jquery.com/ http://www.orangecoat.com/stickyscroll
のようなjQuery用のスティッキー/固定位置プラグインがいくつかあります
が、それらがどのように、またはあるかどうかはわかりませんあなたが直面している問題を解決しています。最悪の場合、自分でスクリプトを作成する必要があります。コードを提供できなかったとしても、これが少し役に立てば幸いです。
PS これは基本的に同じ質問です: http://answers.yahoo.com/question/index?qid=20120302190313AAJhUIp