コードは正常に動作します。 jsフィドル
唯一の問題は、スライドするときに幅が変わることです（「ここをクリック」を押したとき）。#slider の margin-left の 100px に相当する幅をカットしているようです。
「ジャンプ」する理由とその修正方法 コードに何か問題がありますか？
そこにあるもの：コンテンツとスティッキーフッターを持つ中央のdivのスライダー。
質問する
2729 次
3 に答える
3
問題は、#slider の負のマージンにあります。何らかの理由で、アニメーションで正しく描画されません。
ここに解決策があります：http://jsfiddle.net/vyWTL/8/
margin-left0px を維持し、jquery を使用して、コンテナーの幅を考慮して、あるべき値を計算しますleft。これは動的であり、ビューポートの幅が調整されると変更される可能性があるため、ページの読み込み時とウィンドウのサイズ変更時に呼び出される関数呼び出しに入れました。
于 2012-08-07T12:37:27.630 に答える
2
それがニーズに合っているかどうかはわかりませんが、簡単に設定できます：
CSS
...
.slider{
...
bottom:0px;
...
}
jQuery .slideToggle() を使用するだけで、open/closed ステータスを処理し、はるかにスムーズになります。
JS
$("#slide-link").click(function (){
$('#slider').slideToggle();
});
編集1
#slide-link も #slider でトグルするようにこれを更新しました。
基本的に、#slider が非表示かどうかに基づいてアニメーション化します。
if(!$('#slider').is(':hidden')){
$(this).animate({
top: $('#global-container').height()-23
},500)
}else{
$(this).animate({
top: '0px'
},500)
}
編集2
その if(#slider is hidden) を処理する必要がないための別のよりハックな方法を次に示します。したがって、.animate 関数を 1 回だけ記述します。
基本的に $('#slider').is(':hidden') はブール値であり、JS ではブール値は false = 0 および true = 1 の 0/1 値に相当するため、次のように記述できます。
var hid = $('#slider').is(':hidden')
$(this).animate({
top: (1-hid)*(contHeight)
},500)
contHeight は #global-container の高さ - #slide-link の高さです。
編集 3 スクロールの問題
コメントで問題が解決した場合、コンテンツ部分を単語の割り当てで埋めるとidはスクロールしませんが、コンテンツパネルは #slider を埋めて、スクロールできずにページを続けているようです.
これは、.content の高さが固定されていないためです。これは、フッターの高さが 70px であることがわかっているためです。単純に、#slider 内に残されたすべてのスペースを .content で埋めたいのですが、この方法では .content はそうではありません。 「固定値」はありません。つまり、css 内に高さの定義がありません。したがって、私たちがする必要があるのは、#slide で行う方法と同じように、どのくらいの高さにする必要があるかを動的に彼に伝えることです。そのため、JS を追加します。
$('.content').height(contHeight-70)
このようにして、次を追加できます。
overflow:hidden; //this is to prevent orizontal scroll
overflow-y:scroll; // this enables vertical scroll
これが正しいことを願っています。
于 2012-08-07T12:18:59.420 に答える