1

ここに画像の説明を入力

皆さん、こんにちは。スティッキー フッター スクリプトとスティッキー サイドバー スクリプトをすべて見てきました。私が欲しいのは似たようなものです。フッターのある長いページがあり、フッターの下にさらにコンテンツがあります。コンテンツがフッターに達したときにのみページにフッターを表示したいのですが、フッターが画面に表示されると、それが表示されます一番下に固定されているので、ページをスクロールし続けて「その他のコンテンツ」を表示できます。上にスクロールすると、フッターが一番下の固定から切り離されて通常に戻ります!

スクリーンショットを添付して、よりよく説明できるようにしました。

4

4 に答える 4

4

まあ、それにはいくつかの手順が必要です...

  • ウィンドウがどれだけスクロールしたかを取得します。
  • フッターが固定として機能し始めるポイントを超えてスクロールしたかどうかを確認します。
  • そのポイントは、ウィンドウの高さ - フッターの高さの合計です。
  • その点が再び戻った場合は、元どおりにします。
  • スクロールイベントに関数を追加。したがって、すべてをチェックし、必要に応じて作業を行います。

ここでデモを参照してください: http://jsfiddle.net/techsin/MgQQm/2/embedded/result/

ここのコードを参照してください: http://jsfiddle.net/techsin/MgQQm/2/

$footer = $('#footer');
$win = $(window);
var ipos = $footer.offset().top;
var wpos, space, width;
width = $footer.width();

function h(e) {
    wpos = $win.scrollTop();
    space = $win.height() - $footer.height();
    if ((wpos + space) > ipos) {
        $footer.addClass('fixed');
        $footer.width(width);
    } else {
        $footer.removeClass('fixed');

    }
}


$(window).scroll(h);
于 2013-08-07T06:14:16.350 に答える
1 
 <div id="content"></div>
 <div id="moreContent"></div>
 <div id="footer"></div>

CSS

 #content {
   height:1000px;
   width:400px;
   position: relative;
   z-index: 2;
   background-color:red;
}
#moreContent{
   height:500px;
   width:450px;
   margin:0px 0px 100px 0px;
   position: relative;
   z-index: 0;
   background-color:yellow;
 }
#footer {
   position: fixed;
   bottom: 0;
   width:400px;
   left: 8px;
   right: 0;
   height: 100px;
   z-index: 1;
   background-color:blue;
}

デモ

于 2013-08-07T04:25:24.567 に答える
0

フッター要素の CSS

.sticky {
    width: 100%;
    position:fixed;
    background: #F6D565;
    padding: 25px 0;
    top:700px;
    text-transform: uppercase;
  }

デモ チェックの場合、この JSFIDDLE

于 2013-08-07T05:47:31.900 に答える