スクロールされたdivを画面の上部に固定するにはどうすればよいですか?


305

コンテンツのブロックの下にあるdivを作成したいのですが、ページがその上部境界に接触するのに十分なだけスクロールされると、所定の位置に固定され、ページと共にスクロールします。


5
2014年6月の時点で、Sticky-kit jQueryプラグインは最も簡単なオプションの1つであり、エントリーや多くの機能に対するバリアが非常に低くなっています。あなたがすぐに地面から降りる簡単な方法を探しているなら、始めるのに最適な場所です。
user456584 2014年


32
CSSの追加position: sticky; top:0;1月2017年にほとんどのブラウザで作品を
コリン・「Tハート

9
神聖ながらくた、それposition: sticky;は魔法です。
tscizzle 2017年

回答:


259

単にcssを使用して、要素をfixedとして配置できます。

.fixedElement {
    background-color: #c0c0c0;
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
}

編集:絶対位置の要素が必要です。スクロールオフセットが要素に達したら、要素を固定に変更し、上部の位置をゼロに設定する必要があります。

scrollTop関数を使用して、ドキュメントの上部スクロールオフセットを検出できます

$(window).scroll(function(e){ 
  var $el = $('.fixedElement'); 
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $el.css({'position': 'fixed', 'top': '0px'}); 
  }
  if ($(this).scrollTop() < 200 && isPositionFixed){
    $el.css({'position': 'static', 'top': '0px'}); 
  } 
});

スクロールオフセットは200に達したときに、要素がします固執固定して配置されているため、ブラウザウィンドウの上部に。


4
それは私が行くことを達成していません。要素をページ上部の200pxから開始し(他のコンテンツのためのスペースを確保するため)、ユーザーが下にスクロールすると上部に固定されます。
evanr 2009

3
あなたの編集は確かに今の質問のニーズを満たしていますが、ページが再びトップにスクロールして戻ったときにまだ問題があります。要素scrollTopに到達した後、どこかにそれを格納し、ページがその位置に戻ったとき(上方向にスクロールしたとき)にcssをデフォルトに戻す...おそらく.toggleClassを使用してこれを行う方がよい...
Sander

9
これはほとんどの場合ですが、ウィンドウが一番上にスクロールされるときに固定位置を削除する必要がありました。 if ($(this).scrollTop() < 200 && $el.css('position') == 'fixed') { $('.fixedElement').css({'position': 'static', 'top': '0px'}); }
Derrick Petzold 2012年

1
@DerrickPetzold私はそれを答えに入れました、かなり重要なものです:)
MarioDS

1
new exampleあなたが与えたリンクは、私がそれを見ることさえできないほどきれいで明確です!-_-
sohaiby 2015年

245

この例は、Google Codeの課題ページと(最近になって)Stack Overflowの編集ページで見ました。

CMSの回答では、上にスクロールしても位置が元に戻りません。Stack Overflowからの恥知らずに盗まれたコードは次のとおりです。

function moveScroller() {
    var $anchor = $("#scroller-anchor");
    var $scroller = $('#scroller');

    var move = function() {
        var st = $(window).scrollTop();
        var ot = $anchor.offset().top;
        if(st > ot) {
            $scroller.css({
                position: "fixed",
                top: "0px"
            });
        } else {
            $scroller.css({
                position: "relative",
                top: ""
            });
        }
    };
    $(window).scroll(move);
    move();
}
<div id="sidebar" style="width:270px;"> 
  <div id="scroller-anchor"></div> 
  <div id="scroller" style="margin-top:10px; width:270px"> 
    Scroller Scroller Scroller
  </div>
</div>

<script type="text/javascript"> 
  $(function() {
    moveScroller();
  });
</script> 

そして、簡単なライブデモ

新生、スクリプトなしの代替はposition: sticky、Chrome、Firefox、Safariでサポートされています。HTML5Rocksデモに関する記事、およびMozillaのドキュメントを参照してください


3
何らかの理由で、{scroll:false}が問題を引き起こしていました(jQuery 1.6.2)。それなしで動作するようです。リンクされたデモからのフォーク。それが目的を果たすかどうかの考えはありますか?
エディ

私はこれに多くの問題を抱えています、私の人生は複製できないので、ライブデモを複製しようとしても機能しませんでした。誰もが段階的な指示を提供するチュートリアルにリンクできますか?
Trevor Dupp、2011

2
デモ(1.3.2)と同じバージョンのjQueryを使用すると、これは問題なく動作するようです。ある時点でoffset、オブジェクトを入力api.jquery.com/offsetとして受け入れることを停止している必要があります。@Eddie変更は現在のjQueryで安全でなければなりません。
Graeme

1
空のスクローラーアンカーdivをすべて置き換えて置き換えvar d = $("#scroller-anchor").offset().top;られない理由はありますvar d = $("#sidebar").offset().top;か?ここに私が話していることを示す私のフォークがあります。
Mike Deck

@MikeDeck余白やパディングがある場合、コンテナーに対してスクローラーが配置される場所を制御できるようにしたいと思います。
Josh Lee

72

2017年1月およびChrome 56のリリース以降、一般的に使用されているほとんどのブラウザーposition: stickyがCSS のプロパティをサポートしています。

#thing_to_stick {
  position: sticky;
  top: 0px;
}

FirefoxとChromeで私のためのトリックを行います。

Safariでは、引き続きを使用する必要がありますposition: -webkit-sticky

ポリフィルはInternet ExplorerおよびEdgeで使用できます。https://github.com/wilddeer/stickyfillは良いようです。


5
これは、今日一般的に使用されているほとんどのブラウザーでサポートされています。caniuse.com/#feat=css-stickyを参照してください。次に、カスタムJavascriptを必要とするバージョンよりも、2行のコードにまとめることができるソリューションの方を好みます。そして、それは将来にも対応します。ブラウザーの互換性が心配な場合は、ポリフィルを使用してください。
Colin 't Hart

1
これより簡単にすることはできません:)
mestarted

1
このコメントに、z-index:99999;を追加できるようにしたいと思います。そうでない場合、先頭に移動すると、他のコンテンツが最初にレンダリングされます。しかし、これは受け入れられる解決策であるべきです。
dayanrr91

id = "thing_to_stick"を使用してdivでラップするだけ
Anton

シンプルで簡単なソリューション。もちろん、私の場合、他のソリューションよりもうまく機能します。
fsevenm

33

私はあなたと同じ問題を抱えていて、それを処理するためのjQueryプラグインを作成してしまいました。実際にここで挙げた問題をすべて解決し、さらにいくつかのオプション機能も追加します。

オプション

stickyPanelSettings = {
    // Use this to set the top margin of the detached panel.
    topPadding: 0,

    // This class is applied when the panel detaches.
    afterDetachCSSClass: "",

    // When set to true the space where the panel was is kept open.
    savePanelSpace: false,

    // Event fires when panel is detached
    // function(detachedPanel, panelSpacer){....}
    onDetached: null,

    // Event fires when panel is reattached
    // function(detachedPanel){....}
    onReAttached: null,

    // Set this using any valid jquery selector to 
    // set the parent of the sticky panel.
    // If set to null then the window object will be used.
    parentSelector: null
};

https://github.com/donnyv/sticky-panel

デモ: http : //htmlpreview.github.io/?https : //github.com/donnyv/sticky-panel/blob/master/jquery.stickyPanel/Main.htm


1
おい!ありがとうございました!これはすばらしい解決策であり、共有してくれてありがとう。確かに時間を大幅に節約できました。私が読んだ限りでは、これが最も完全な解決策であるため、これはこの質問に対する全体的に受け入れられた解決策になるはずです。基本的に、他のユーザーは、ブロックの後の元のX位置の問題を解決しませんでした。固定スタイルが適用されています。あなたはこの問題を解決します。本当にありがとう!
Marcos Buarque、2011年

ドニーさん、プラグインも気に入っています(v1.4.1)...問題が1つありました。何も指定されていない場合、ブロック要素の幅が失われました。したがって、デタッチするときに変更しました...幅を設定するだけで、同じままです。code//パネルを切り離しますnode.css({"margin":0、 "left":nodeLeft、 "top":newNodeTop、 "position": "fixed"、 "width":node.width()}); code
ハンコック

多くの解決策を探して試しましたが、これは「そのまま」で機能しました。素晴らしい仕事!ありがとうございました!
ajtatum 2012

2
@WillHancock iPadのサポートを追加し、更新のバグを修正し、onDetachedおよびonReattachedイベントを追加しました。新しいイベントでは、パネルとスペーサーパネルを取り外して再度取り付けた後、アクセスできます。
Donny V.

4
divのスクロールをサポートするためのparentSelectorオプションも追加されました。
Donny V.

24

そしてこれがjquery なしの方法です(更新:CSSのみでこれを実行できるようになった他の回答を参照してください)

var startProductBarPos=-1;
window.onscroll=function(){
  var bar = document.getElementById('nav');
  if(startProductBarPos<0)startProductBarPos=findPosY(bar);

  if(pageYOffset>startProductBarPos){
    bar.style.position='fixed';
    bar.style.top=0;
  }else{
    bar.style.position='relative';
  }

};

function findPosY(obj) {
  var curtop = 0;
  if (typeof (obj.offsetParent) != 'undefined' && obj.offsetParent) {
    while (obj.offsetParent) {
      curtop += obj.offsetTop;
      obj = obj.offsetParent;
    }
    curtop += obj.offsetTop;
  }
  else if (obj.y)
    curtop += obj.y;
  return curtop;
}
* {margin:0;padding:0;}
.nav {
  border: 1px red dashed;
  background: #00ffff;
  text-align:center;
  padding: 21px 0;

  margin: 0 auto;
  z-index:10; 
  width:100%;
  left:0;
  right:0;
}

.header {
  text-align:center;
  padding: 65px 0;
  border: 1px red dashed;
}

.content {
  padding: 500px 0;
  text-align:center;
  border: 1px red dashed;
}
.footer {
  padding: 100px 0;
  text-align:center;
  background: #777;
  border: 1px red dashed;
}
<header class="header">This is a Header</header>
<div id="nav" class="nav">Main Navigation</div>
<div class="content">Hello World!</div>
<footer class="footer">This is a Footer</footer>


4
ありがとうございました!最近、ネイティブJSソリューションを見つけるのが難しくなっています。これは完全に機能しました。
Sherri

jqueryのは、私のプロジェクトを持っている一部のレガシー企業コードと競合しているので、これは完全に働いた、ありがとうございました
SNG

ただし、ページの下部までスクロールすると、自動的に上部に戻る問題が発生しています。
SNG

@sng私のサンプルページはそれをしますか?
ジムWはモニカを復活させる

@JimW私は問題を見つけました。左側のメインコンテンツdivの横にある垂直ベースのメニューバーでそれを使用しようとしました。スクロールダウンすると、ページの下部に適切に到達するタイミングを判別できないため、バグが発生していました。コンテナーのdivの高さをウィンドウ画面のサイズに設定するコード行をスクロールイベントリスナーに追加してしまいました
sng

9

これは私がjqueryでそれをした方法です。これはスタックオーバーフローに関するさまざまな回答からすべてまとめられました。このソリューションは、セレクターをキャッシュしてパフォーマンスを向上させ、スティッキーdivがスティッキーになったときの「ジャンプ」問題も解決します。

jsfiddleで確認してください:http ://jsfiddle.net/HQS8s/

CSS:

.stick {
    position: fixed;
    top: 0;
}

JS:

$(document).ready(function() {
    // Cache selectors for faster performance.
    var $window = $(window),
        $mainMenuBar = $('#mainMenuBar'),
        $mainMenuBarAnchor = $('#mainMenuBarAnchor');

    // Run this on scroll events.
    $window.scroll(function() {
        var window_top = $window.scrollTop();
        var div_top = $mainMenuBarAnchor.offset().top;
        if (window_top > div_top) {
            // Make the div sticky.
            $mainMenuBar.addClass('stick');
            $mainMenuBarAnchor.height($mainMenuBar.height());
        }
        else {
            // Unstick the div.
            $mainMenuBar.removeClass('stick');
            $mainMenuBarAnchor.height(0);
        }
    });
});

7

ここに別のオプションがあります:

ジャバスクリプト

var initTopPosition= $('#myElementToStick').offset().top;   
$(window).scroll(function(){
    if($(window).scrollTop() > initTopPosition)
        $('#myElementToStick').css({'position':'fixed','top':'0px'});
    else
        $('#myElementToStick').css({'position':'absolute','top':initTopPosition+'px'});
});

あなたは、#myElementToStickで始まる必要がposition:absoluteCSSプロパティ。


1
これは非常にクリーンで簡単な解決策だと思います。要素を「絶対」に配置しないだけで、レイアウトが壊れる可能性があります。静的に設定するだけです。
Gerfried 2017

4

ジョシュ・リーコリン・「tはハートが言っている、あなたは、必要に応じて、単に使用することができますposition: sticky; top: 0;あなたがでスクロールをしたいというのdivに適用さを...

さらに、これをページの上部にコピーするか、外部CSSシートに合うようにフォーマットするだけです。

<style>
#sticky_div's_name_here { position: sticky; top: 0; }
</style>

ただ、交換する#sticky_div's_name_hereあなたのdivであった場合、あなたのdivの名前で、つまり<div id="example">あなたが入れてしまうでしょう#example { position: sticky; top: 0; }


1

私の解決策は少し冗長ですが、中央揃えレイアウトの左端からの可変位置を処理します。

// Ensurs that a element (usually a div) stays on the screen
//   aElementToStick   = The jQuery selector for the element to keep visible
global.makeSticky = function (aElementToStick) {
    var $elementToStick = $(aElementToStick);
    var top = $elementToStick.offset().top;
    var origPosition = $elementToStick.css('position');

    function positionFloater(a$Win) {
        // Set the original position to allow the browser to adjust the horizontal position
        $elementToStick.css('position', origPosition);

        // Test how far down the page is scrolled
        var scrollTop = a$Win.scrollTop();
        // If the page is scrolled passed the top of the element make it stick to the top of the screen
        if (top < scrollTop) {
            // Get the horizontal position
            var left = $elementToStick.offset().left;
            // Set the positioning as fixed to hold it's position
            $elementToStick.css('position', 'fixed');
            // Reuse the horizontal positioning
            $elementToStick.css('left', left);
            // Hold the element at the top of the screen
            $elementToStick.css('top', 0);
        }
    }

    // Perform initial positioning
    positionFloater($(window));

    // Reposition when the window resizes
    $(window).resize(function (e) {
        positionFloater($(this));
    });

    // Reposition when the window scrolls
    $(window).scroll(function (e) {
        positionFloater($(this));
    });
};

1

他に問題がある人のために試してみるバージョンがもう1つあります。この重複する質問で説明されている手法を組み合わせて、必要なヘルパーDIVを動的に生成するため、追加のHTMLは必要ありません。

CSS:

.sticky { position:fixed; top:0; }

jQuery:

function make_sticky(id) {
    var e = $(id);
    var w = $(window);
    $('<div/>').insertBefore(id);
    $('<div/>').hide().css('height',e.outerHeight()).insertAfter(id);
    var n = e.next();
    var p = e.prev();
    function sticky_relocate() {
      var window_top = w.scrollTop();
      var div_top = p.offset().top;
      if (window_top > div_top) {
        e.addClass('sticky');
        n.show();
      } else {
        e.removeClass('sticky');
        n.hide();
      }
    }
    w.scroll(sticky_relocate);
    sticky_relocate();
}

要素をスティッキーにするには、次の操作を行います。

make_sticky('#sticky-elem-id');

要素がスティッキーになると、コードは残りのコンテンツの位置を管理して、スティッキー要素が残したギャップにジャンプしないようにします。また、上にスクロールすると、スティッキー要素が元の非スティッキー位置に戻ります。


あなたのアプローチはJohnBのアプローチとよく似ています。その答えとの違いを考えると、(1)2番目の「ヘルパーdiv」を使用することには利点がありますか(JohnBが使用する1つだけではなく)、(2)hide()を使用することには利点がありますか。 (JohnBのように)ヘルパーdivの高さを設定するだけでなく、show()?おそらくパフォーマンスの違いですか?これまでのところ、違いを見分けることはできませんでしたが、おそらく特定のシナリオでは(インライン要素などが含まれるような)違いがある可能性があります。ありがとう。
ジェイソンフランク

1

ここにジョシュリーの答えの拡張版があります。divをサイドバーの右側に配置し、範囲内でフロートさせたい場合(つまり、上部と下部のアンカー位置を指定する必要があります)。また、モバイルデバイスでこれを表示するときのバグも修正します(左スクロール位置を確認する必要があります。そうしないと、divが画面から移動します)。

function moveScroller() {
    var move = function() {
        var st = $(window).scrollTop();
        var sl = $(window).scrollLeft();
        var ot = $("#scroller-anchor-top").offset().top;
        var ol = $("#scroller-anchor-top").offset().left;
        var bt = $("#scroller-anchor-bottom").offset().top;
        var s = $("#scroller");
        if(st > ot) {
            if (st < bt - 280) //280px is the approx. height for the sticky div
            {
                s.css({
                    position: "fixed",
                    top: "0px",
                    left: ol-sl
                }); 
            }
            else
            {
                s.css({
                    position: "fixed",
                    top: bt-st-280,
                    left: ol-sl
                }); 
            }
        } else {
            s.css({
                position: "relative",
                top: "",
                left: ""
            });

        }
    };
    $(window).scroll(move);
    move();
}

1

同じものを探しているときにこれに出くわしました。私はそれが古い質問であることを知っていますが、もっと最近の答えを提供したいと思いました。

Scrolloramaには「固定」機能があり、これはまさに私が探していたものです。

http://johnpolacek.github.io/scrollorama/



0

受け入れられた回答は機能しますが、上にスクロールしても前の位置に戻りません。そこに置いた後は常に上に貼り付けられます。

  $(window).scroll(function(e) {
    $el = $('.fixedElement');
    if ($(this).scrollTop() > 42 && $el.css('position') != 'fixed') {
      $('.fixedElement').css( 'position': 'fixed', 'top': '0px');

    } else if ($(this).scrollTop() < 42 && $el.css('position') != 'relative') {
      $('.fixedElement').css( 'relative': 'fixed', 'top': '42px');
//this was just my previous position/formating
    }
  });

jleedevの応答は機能しますが、機能させることができませんでした。彼のサンプルページも機能しませんでした(私にとって)。


0

3つの行を追加して、ユーザーが一番上にスクロールして戻ったときに、divが元の場所に固定されるようにすることができます。

これがコードです:

if ($(this).scrollTop() < 200 && $el.css('position') == 'fixed'){
    $('.fixedElement').css({'position': 'relative', 'top': '200px'});
}

0

私はdivにリンクを設定しているので、文字と数字のリンクの垂直リストです。

#links {
    float:left;
    font-size:9pt;
    margin-left:0.5em;
    margin-right:1em;
    position:fixed;
    text-align:center;
    width:0.8em;
}

次に、この便利なjQuery関数をセットアップして、ロードされた位置を保存し、その位置を超えてスクロールしたときに位置を固定に変更します。

注:これは、ページの読み込み時にリンクが表示されている場合にのみ機能します。

var listposition=false;
jQuery(function(){
     try{
        ///// stick the list links to top of page when scrolling
        listposition = jQuery('#links').css({'position': 'static', 'top': '0px'}).position();
        console.log(listposition);
        $(window).scroll(function(e){
            $top = $(this).scrollTop();
            $el = jQuery('#links');
            //if(typeof(console)!='undefined'){
            //    console.log(listposition.top,$top);
            //}
            if ($top > listposition.top && $el.css('position') != 'fixed'){
                $el.css({'position': 'fixed', 'top': '0px'});
            }
            else if ($top < listposition.top && $el.css('position') == 'fixed'){
                $el.css({'position': 'static'});
            }
        });

    } catch(e) {
        alert('Please vendor admin@mydomain.com (Myvendor JavaScript Issue)');
    }
});

0

上記の作業の一部を使用して、この技術を作成しました。私はそれを少し改善し、自分の作品を共有したいと思いました。お役に立てれば。

jsfuddleコード

function scrollErrorMessageToTop() {
    var flash_error = jQuery('#flash_error');
    var flash_position = flash_error.position();

    function lockErrorMessageToTop() {
        var place_holder = jQuery("#place_holder");
        if (jQuery(this).scrollTop() > flash_position.top && flash_error.attr("position") != "fixed") {
            flash_error.css({
                'position': 'fixed',
                'top': "0px",
                "width": flash_error.width(),
                "z-index": "1"
            });
            place_holder.css("display", "");
        } else {
            flash_error.css('position', '');
            place_holder.css("display", "none");
        }

    }
    if (flash_error.length > 0) {
        lockErrorMessageToTop();

        jQuery("#flash_error").after(jQuery("<div id='place_holder'>"));
        var place_holder = jQuery("#place_holder");
        place_holder.css({
            "height": flash_error.height(),
            "display": "none"
        });
        jQuery(window).scroll(function(e) {
            lockErrorMessageToTop();
        });
    }
}
scrollErrorMessageToTop();​

これは、スクロールを行う方法のもう少しダイナミックです。それはいくつかの作業を必要とし、私はいつかこれをプラグインに変えるでしょうが、これは私が仕事の時間の後に思いついたものです。


0

JavaScriptでは、次のことができます。

var element = document.getElementById("myid");
element.style.position = "fixed";
element.style.top = "0%";

0

正確な解決策ではありませんが、検討すべき優れた代替策

このCSS ONLY画面上部のスクロールバー。で、すべての問題を解決ONLY CSSNOのJavaScript、NO jQueryの、ノーブレインワーク()。

私のフィドルをお楽しみください:Dすべてのコードがそこに含まれています:)

CSS

#menu {
position: fixed;
height: 60px;
width: 100%;
top: 0;
left: 0;
border-top: 5px solid #a1cb2f;
background: #fff;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
z-index: 999999;
}

.w {
    width: 900px;
    margin: 0 auto;
    margin-bottom: 40px;
}<br type="_moz">

ここに効果を確認できるようにコンテンツを十分に長くしてください:)ああ、そしてリファレンスもそこにあります、彼が彼の信用に値するという事実のために

CSS ONLY画面上部のスクロールバー


少しofftopic;)
Tokk

私は良い解決策に反対しているわけではありませんが、あなたの答えのコードはメニューのようなものを常に上に置く方法を提供します。しかし、それは問題ではありませんでした...
Tokk

あなたはdivを修正しているだけで、スクロールについて何もしていません。
ヨギホスティング2015年

0

jquery-visibleプラグインを使用する例を次に示します。http://jsfiddle.net/711p4em4/

HTML:

<div class = "wrapper">
    <header>Header</header>
    <main>
        <nav>Stick to top</nav>
        Content
    </main>
    <footer>Footer</footer>
</div>

CSS:

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #e2e2e2;
}

.wrapper > header,
.wrapper > footer {
    font: 20px/2 Sans-Serif;
    text-align: center;
    background-color: #0040FF;
    color: #fff;
}

.wrapper > main {
    position: relative;
    height: 500px;
    background-color: #5e5e5e;
    font: 20px/500px Sans-Serif;
    color: #fff;
    text-align: center;
    padding-top: 40px;
}

.wrapper > main > nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font: 20px/2 Sans-Serif;
    color: #fff;
    text-align: center;
    background-color: #FFBF00;
}

.wrapper > main > nav.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

JS(jquery-visibleプラグインを含む):

(function($){

    /**
     * Copyright 2012, Digital Fusion
     * Licensed under the MIT license.
     * http://teamdf.com/jquery-plugins/license/
     *
     * @author Sam Sehnert
     * @desc A small plugin that checks whether elements are within
     *       the user visible viewport of a web browser.
     *       only accounts for vertical position, not horizontal.
     */
    var $w = $(window);
    $.fn.visible = function(partial,hidden,direction){

        if (this.length < 1)
            return;

        var $t        = this.length > 1 ? this.eq(0) : this,
            t         = $t.get(0),
            vpWidth   = $w.width(),
            vpHeight  = $w.height(),
            direction = (direction) ? direction : 'both',
            clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true;

        if (typeof t.getBoundingClientRect === 'function'){

            // Use this native browser method, if available.
            var rec = t.getBoundingClientRect(),
                tViz = rec.top    >= 0 && rec.top    <  vpHeight,
                bViz = rec.bottom >  0 && rec.bottom <= vpHeight,
                lViz = rec.left   >= 0 && rec.left   <  vpWidth,
                rViz = rec.right  >  0 && rec.right  <= vpWidth,
                vVisible   = partial ? tViz || bViz : tViz && bViz,
                hVisible   = partial ? lViz || rViz : lViz && rViz;

            if(direction === 'both')
                return clientSize && vVisible && hVisible;
            else if(direction === 'vertical')
                return clientSize && vVisible;
            else if(direction === 'horizontal')
                return clientSize && hVisible;
        } else {

            var viewTop         = $w.scrollTop(),
                viewBottom      = viewTop + vpHeight,
                viewLeft        = $w.scrollLeft(),
                viewRight       = viewLeft + vpWidth,
                offset          = $t.offset(),
                _top            = offset.top,
                _bottom         = _top + $t.height(),
                _left           = offset.left,
                _right          = _left + $t.width(),
                compareTop      = partial === true ? _bottom : _top,
                compareBottom   = partial === true ? _top : _bottom,
                compareLeft     = partial === true ? _right : _left,
                compareRight    = partial === true ? _left : _right;

            if(direction === 'both')
                return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)) && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
            else if(direction === 'vertical')
                return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop));
            else if(direction === 'horizontal')
                return !!clientSize && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
        }
    };

})(jQuery);

$(function() {
    $(window).scroll(function() {
        $(".wrapper > header").visible(true) ?
            $(".wrapper > main > nav").removeClass("fixed") :
            $(".wrapper > main > nav").addClass("fixed");
    });
});

-1

フッターがdivに達するまでスティッキー:

function stickyCostSummary() {
    var stickySummary = $('.sticky-cost-summary');
    var scrollCostSummaryDivPosition = $(window).scrollTop();
    var footerHeight = $('#footer').height();
    var documentHeight = $(document).height();
    var costSummaryHeight = stickySummary.height();
    var headerHeight = 83;
    var footerMargin = 10;
    var scrollHeight = 252;
    var footerPosition = $('#footer').offset().top;

    if (scrollCostSummaryDivPosition > scrollHeight && scrollCostSummaryDivPosition <= (documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin)) {
        stickySummary.removeAttr('style');
        stickySummary.addClass('fixed');

    } else if (scrollCostSummaryDivPosition > (documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin)) {
        stickySummary.removeClass('fixed');
        stickySummary.css({
          "position" : "absolute",
          "top" : (documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin - scrollHeight) + "px"
      });
    } else {
        stickySummary.removeClass('fixed');
        stickySummary.css({
            "position" : "absolute",
            "top" : "0"
        });
    }
}

$window.scroll(stickyCostSummary);
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.