web-dev-qa-db-ja.com

特定のポイントで固定位置のスクロールを停止しますか？

Position：fixedの要素があるため、ページをスクロールしますが、どのようにしたいのでしょうか。ユーザーが上にスクロールすると、要素が特定のポイントでスクロールを停止するようにします。たとえば、ページの上部から250pxの場合、これは可能ですか？どんな助けやアドバイスも役立つでしょう！

そのためにはjqueryを使用する必要があると感じました。ユーザーがいる場所のスクロールまたは位置を取得しようとしましたが、本当に混乱しました、jqueryソリューションはありますか？

jquerycsspositioning
87
Louise McComiskey

これは、必要なことを実行できる、先ほど書いた簡単なjQueryプラグインです。

$.fn.followTo = function (pos) {
    var $this = this,
        $window = $(window);

    $window.scroll(function (e) {
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'absolute',
                top: pos
            });
        } else {
            $this.css({
                position: 'fixed',
                top: 0
            });
        }
    });
};

$('#yourDiv').followTo(250);

実施例を参照→

118
mVChr

こんな感じ？

http://jsfiddle.net/b43hj/

$(window).scroll(function(){
    $("#theFixed").css("top", Math.max(0, 250 - $(this).scrollTop()));
});

$(window).scroll(function(){
    $("#theFixed").css("top", Math.max(0, 100 - $(this).scrollTop()));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="theFixed" style="position:fixed;top:100px;background-color:red">SOMETHING</div>

<!-- random filler to allow for scrolling -->
STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>
131
James Montagne

この問題を解決する完全なjqueryプラグインを次に示します。

https://github.com/bigspotteddog/ScrollToFixed

このプラグインの説明は次のとおりです。

このプラグインは、要素が垂直方向にスクロールして表示される場合に、要素をページの上部に固定するために使用されます。ただし、水平スクロールで要素を左また​​は右に移動し続けることはできます。

オプションmarginTopを指定すると、垂直スクロールがターゲット位置に達すると、要素は垂直方向の上方への移動を停止します。ただし、ページが左または右にスクロールされると、要素は水平方向に移動します。ページがターゲット位置を超えてスクロールダウンすると、要素はページ上の元の位置に復元されます。

このプラグインは、Firefox 3/4、Google Chrome 10/11、Safari 5、およびInternet Explorer 8/9でテストされています。

特定のケースの使用法：

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>

$(document).ready(function() {
    $('#mydiv').scrollToFixed({ marginTop: 250 });
});
19
bigspotteddog

James Montagneが答えで彼のコードでやったことはできますが、それはChrome（V19でテスト済み）でちらつきます。

「top」の代わりに「margin-top」を配置すると、修正できます。なぜマージントーで動作するのか本当にわからない。

$(window).scroll(function(){
    $("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});

http://jsbin.com/idacel

6
Jure Ravlić

可能なCSSのみソリューションはposition: sticky;で達成できます

ブラウザのサポートは実際には本当に良いです： https://caniuse.com/#search=position%3A%20sticky

以下に例を示します。 https://jsfiddle.net/0vcoa43L/7/

4
JiiB

プロジェクトでは、実際にページの読み込み時に画面の下部に固定された見出しがあります（描画アプリなので、見出しは下部にあり、ワイドビューポートのキャンバス要素に最大限のスペースを与えます）。

フッターの上に見出しが必要ないため、スクロールのフッターに達すると見出しが「絶対」になる必要がありました（見出しの色はフッターの背景色と同じです）。

私はここで最も古い応答（Gearge Milloが編集）を受け取り、そのコードスニペットは私のユースケースで機能しました。いくつか遊んで、私はこれを機能させました。フッターに到達すると、固定ヘッダーはフッターの上に美しく配置されます。

私は自分のユースケースとそれがどのように機能したかを共有すると思い、ありがとうと言います！アプリ： http://joefalconer.com/web_projects/drawingapp/index.html

    /* CSS */
    @media screen and (min-width: 1100px) {
        #heading {
            height: 80px;
            width: 100%;
            position: absolute;  /* heading is 'absolute' on page load. DOESN'T WORK if I have this on 'fixed' */
            bottom: 0;
        }
    }

    // jQuery
    // Stop the fixed heading from scrolling over the footer
    $.fn.followTo = function (pos) {
      var $this = this,
      $window = $(window);

      $window.scroll(function (e) {
        if ($window.scrollTop() > pos) {
          $this.css( { position: 'absolute', bottom: '-180px' } );
        } else {
          $this.css( { position: 'fixed', bottom: '0' } );
        }
      });
    };
    // This behaviour is only needed for wide view ports
    if ( $('#heading').css("position") === "absolute" ) {
      $('#heading').followTo(180);
    }
2
joseph falconer

私の解決策

$(window).scroll(function(){
        if($(this).scrollTop()>425) {
            $("#theRelative").css("margin-top",$(this).scrollTop()-425);
            }   else {
                $("#theRelative").css("margin-top",$(this).scrollTop()-0);
                }
            });
            });
2
user3288218

これについてのブログ記事を書きました この機能を紹介しました：

$.fn.myFixture = function (settings) {
  return this.each(function () {

    // default css declaration 
    var elem = $(this).css('position', 'fixed');

    var setPosition = function () {         
      var top = 0;
      // get no of pixels hidden above the the window     
      var scrollTop = $(window).scrollTop();    
      // get elements distance from top of window
      var topBuffer = ((settings.topBoundary || 0) - scrollTop);
      // update position if required
      if (topBuffer >= 0) { top += topBuffer }
      elem.css('top', top);      
    };

    $(window).bind('scroll', setPosition);
    setPosition();
  });
};
1
Nathan McGinness

Mootoolsフレームワークを使用したソリューション。

http://mootools.net/docs/more/Fx/Fx.Scroll

  1. $（ 'myElement'）。getPosition（）。xを使用して、スクロールを停止する要素の位置（x＆y）を取得します

    $（ 'myElement'）。getPosition（）。y

  2. スクロールのようなアニメーションの場合：

    new Fx.Scroll（ 'scrollDivId'、{offset：{x：24、y：432}}）。toTop（）;

  3. すぐにスクロールを設定するには、次を使用します。

    new Fx.Scroll（myElement）.set（x、y）;

お役に立てれば ！！ ：D

0
Zohaib

このソリューションが好きだった

$(window).scroll(function(){
    $("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});

私の問題は、Adobe Museの相対的な位置のコンテナを処理しなければならなかったことです。

私の解決策：

$(window).scroll(function(){
    if($(this).scrollTop()>425) {
         $("#theRelative").css("margin-top",$(this).scrollTop()-425);
    }
});
0
leu

私は@jamesの答えが大好きでしたが、その逆を探していました。つまり、フッターの直前に固定位置を停止します、ここに私が思いついたものがあります

var $fixed_element = $(".some_element")
if($fixed_element.length){
        var $offset = $(".footer").position().top,
            $wh = $(window).innerHeight(),
            $diff = $offset - $wh,
            $scrolled = $(window).scrollTop();
        $fixed_element.css("bottom", Math.max(0, $scrolled-$diff));
    }

そのため、固定要素はフッターの直前で停止します。それと重複しません。

0
mshahbazm

私は@mVchrの答えを適応させ、スティッキー広告のポジショニングに使用するようにそれを反転しました：ヘッダーのジャンクが画面から消えるまで絶対に配置（スクロール）する必要があるが、その後は画面に固定/表示されたままにする必要があります：

$.fn.followTo = function (pos) {
    var stickyAd = $(this),
    theWindow = $(window);
    $(window).scroll(function (e) {
      if ($(window).scrollTop() > pos) {
        stickyAd.css({'position': 'fixed','top': '0'});
      } else {
        stickyAd.css({'position': 'absolute','top': pos});
      }
    });
  };
  $('#sticky-ad').followTo(740);

CSS：

#sticky-ad {
    float: left;
    display: block;
    position: absolute;
    top: 740px;
    left: -664px;
    margin-left: 50%;
    z-index: 9999;
}
0
cbmtrx

即興mVChrコード

$(".sidebar").css('position', 'fixed')

    var windw = this;

    $.fn.followTo = function(pos) {
        var $this = this,
                $window = $(windw);

        $window.scroll(function(e) {
            if ($window.scrollTop() > pos) {
                topPos = pos + $($this).height();
                $this.css({
                    position: 'absolute',
                    top: topPos
                });
            } else {
                $this.css({
                    position: 'fixed',
                    top: 250 //set your value
                });
            }
        });
    };

    var height = $("body").height() - $("#footer").height() ;
    $('.sidebar').followTo(height);
    $('.sidebar').scrollTo($('html').offset().top);
0
Sreeraj