0

固定ヘッダーとフッターを使用するといくつかの問題が発生しますが、JavaScript コードを使用してスクロールするときに、固定の代わりに位置: 絶対を使用し、ヘッダーとフッターの位置を変更することを提案する人もいます。これを行う方法を知っている人はいますか? または、この問題が彼に直面しました。

どんな提案も役に立ちます。

よろしくお願いします。

4

2 に答える 2

1

以下のコードが役立つかどうかを確認してください (マージン調整で、配置されている div のサイズの半分の負の値が使用されていることに注意してください)。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>align</title>
<style type="text/css">
body {
    margin: 0px;
    padding: 0px;
}
#text_center {
    text-align: center;
    width: 200px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-20px;
}
#text_bottom {
    text-align: center;
    width: 200px;
    position:absolute;
    left:50%;
    bottom:1%;
    margin-left:-100px;
}
</style>
</head>
<body>
    <div id="text_center">Text 1</div>
    <div id="text_bottom">Text 2</div>
</body>
</html>
于 2012-12-26T10:37:32.317 に答える
1

アーメド、話していた別のスレッドからここに来ました。あなたの質問は、他の人が答えるには十分に明確ではありません。あなたの質問には、JavaScript関数をトリガーして特定のイベントに再配置する必要があるという事実が含まれている必要があります。

これを行う1つの方法は次のとおりです。要素を固定ではなく絶対位置に変更します。固定は一切使用しないでください。次に、ブラウザ ウィンドウがスクロールするかスクロールを終了するたびに、要素を配置するための javacript 関数を起動します。このようにすることで、ユーザーがスクロールを終了した後、要素は常にビューに移動します。それらは実際に表示され、醜く見えます。それらをスムーズに表示するには、css3 トランジションを使用するか、javascript で位置を徐々に補間して、さらに拡張する必要があります。iOS5 および iOS6 では、css3 トランジションを問題なく使用できるはずです。それらは非常に簡単に実装できます。CSS3 トランジションにより、JavaScript 制御のアニメーションが簡単になります。

難しい部分は、JavaScript を実装して要素の位置を計算し、ブラウザがスクロールを終了した後にイベントを発生させることです。

私が正しい方向性を持っているなら、うまくいけば、他の人々がチャイムを鳴らすことができます.

私に投票してください、仲間。:)

于 2012-12-26T11:32:41.380 に答える