web-dev-qa-db-ja.com

jQueryを使用して、表示されているウィンドウ内でオブジェクトをスクロールし続ける

この同じ「AskAQuestion」ページの「HowToAsk/Format」サイドバーボックスが正確にであることに気付いたとき、私は自分がやりたいことの長い説明を書いている最中だった。 =私が欲しいもの。

基本的に、メインセクションが表示されているウィンドウの上部からスクロールし始めない限り、画面の残りの部分と一致して上下にスクロールし、メインセクションと同じ位置に配置されたままになります。その時点で、サイドバーボックスはスクロールを停止し、表示されているウィンドウの上部に対して絶対的に配置されているかのように動作し始めます。

この「質問」画面でソースコードとスクリプトを掘り下げてみましたが、非常に多くのことが行われているため、（少なくとも私にとっては）ほとんど不可能です。 jQueryは実際にはこの種のことをかなり簡単にできると思いますが、私はそれに慣れていないので、自分でそれを理解するのに苦労しています。 （そして、これが一般的な質問であることが判明した場合、私の謝罪-私は約1時間検索してきましたが、so私ができなかった多くの密接な言葉のjQuery質問があります答えを掘り起こすために。）

助けてくれてありがとう。

jqueryscrollpositionbounding-box
14
Laurent Stanevich

これは、スクロール中にオブジェクトを画面に表示したままにするために作成した小さなスニペットです。

ライブデモ

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');

});

更新された例（タイマー+アニメーションあり）

http://jsfiddle.net/Jaybles/C5yWu/2/

3
Dutchie432

これは、Applestoreページにあるshoppingcart Appleの例です。

ロジック：

  • 粘着要素がどこにあるかを確認してください
  • トップウィンドウがあるスクロールイベントを確認してください
  • スティッキー要素にCSSクラスを追加または削除します

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; }

リンクの例

30
michelgotta

あなたがそれを底に保つ必要があるならば、これとして使用してください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では機能しません

1
Aylian Craspa

また、ブラウザのどこかでdivを保持するだけでよい場合は、JavaScriptは必要ありません。CSSでそれを行うことができます。

#chatt-box {
    right: 5px;
    height: auto;
    width: 300px;
    position: fixed;
    bottom: 0px;
}
0
Aylian Craspa