この同じ「AskAQuestion」ページの「HowToAsk/Format」サイドバーボックスが正確にであることに気付いたとき、私は自分がやりたいことの長い説明を書いている最中だった。 =私が欲しいもの。
基本的に、メインセクションが表示されているウィンドウの上部からスクロールし始めない限り、画面の残りの部分と一致して上下にスクロールし、メインセクションと同じ位置に配置されたままになります。その時点で、サイドバーボックスはスクロールを停止し、表示されているウィンドウの上部に対して絶対的に配置されているかのように動作し始めます。
この「質問」画面でソースコードとスクリプトを掘り下げてみましたが、非常に多くのことが行われているため、(少なくとも私にとっては)ほとんど不可能です。 jQueryは実際にはこの種のことをかなり簡単にできると思いますが、私はそれに慣れていないので、自分でそれを理解するのに苦労しています。 (そして、これが一般的な質問であることが判明した場合、私の謝罪-私は約1時間検索してきましたが、so私ができなかった多くの密接な言葉のjQuery質問があります答えを掘り起こすために。)
助けてくれてありがとう。
これは、スクロール中にオブジェクトを画面に表示したままにするために作成した小さなスニペットです。
ライブデモ
http://jsfiddle.net/Jaybles/C5yWu/
[〜#〜] html [〜#〜]
<div id='object'>Top: 0px</div>
[〜#〜] css [〜#〜]
#object{height:200px; width:200px;background:#f00;position:absolute;top:0;left:0;}
jQuery
$(window).scroll(function(){
var objectTop = $('#object').position().top;
var objectHeight = $('#object').outerHeight();
var windowScrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
if (windowScrollTop > objectTop)
$('#object').css('top', windowScrollTop );
else if ((windowScrollTop+windowHeight) < (objectTop + objectHeight))
$('#object').css('top', (windowScrollTop+windowHeight) - objectHeight);
$('#object').html('Top: ' + $('#object').position().top + 'px');
});
更新された例(タイマー+アニメーションあり)
これは、Applestoreページにあるshoppingcart Appleの例です。
ロジック:
JQuery:
$(document).ready(function() {
// check where the shoppingcart-div is
var offset = $('#shopping-cart').offset();
$(window).scroll(function () {
var scrollTop = $(window).scrollTop(); // check the visible top of the browser
if (offset.top<scrollTop) $('#shopping-cart').addClass('fixed');
else $('#shopping-cart').removeClass('fixed');
});
});
CSS:
.fixed {
position: fixed;
top: 20px;
margin-left: 720px;
background-color: #0f0 ! important; }
あなたがそれを底に保つ必要があるならば、これとして使用してくださいjQuery
$(document).scroll(function() {
var objectTop = $('#shopping-cart').position().top;
var objectHeight = $('#shopping-cart').outerHeight();
var windowScrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
if((objectTop+objectHeight) <= $('html').outerHeight())
$('#'+cont).css('top', (windowScrollTop+windowHeight)- objectHeight);
else
$('#'+cont).css('top', $('html').outerHeight()- objectHeight);
});
Css
#shopping-cart{
width: 100%;
height: 50px;
position: absolute;
left: 0px;
bottom: 0px;
}
あなたがそれを一番上に保つ必要があるならば、これとして使用してくださいjquery
$(document).scroll(function() {
var objectHeight = $('#shopping-cart').outerHeight();
var windowScrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
$('#shopping-cart').css('top', windowScrollTop );
});
Css
#shopping-cart{
width: 100%;
height: 50px;
position: absolute;
left: 0px;
top: 0px;
}
それは魔法を実行し、位置であなたのスタイルを維持することを忘れないでください、そして1つのことはInternetExplorer8.0.7では機能しません
また、ブラウザのどこかでdivを保持するだけでよい場合は、JavaScriptは必要ありません。CSSでそれを行うことができます。
#chatt-box {
right: 5px;
height: auto;
width: 300px;
position: fixed;
bottom: 0px;
}