jQueryでスクロールすると表示する系いろいろ
表示位置ですが、scrollTopはウィンドウ上部の位置なので「$(document).height() 」（ドキュメントの高さ）だけだと足りませんね。 「$(document).height() – $(window).height()」（ドキュメントの高さ – ウィンドウの高さ）画面下ぴったりの位置で表示することができます。 ここでは画面下よりちょっと上で表示したかったので「-500」しています。
下部までスクロールすると右下に配置したコンテンツが開く最近こういうのも見ますよね。 あれはプラグインかなにかなのでしょうか。 ということでやってみます。
開くかも 閉じるボタンはcssでバックグラウンドに配置しています。 #slide < position: fixed; width: 200px; height: 30px; bottom: 0; right: 0; color: #666; background: #fff; border-left: solid 1px #999; border-top: solid 1px #999; box-shadow: 0px 0px 10px 0px rgba(0,0,0,1); >#slide-in < padding: 5px 10px; >#slide a < text-decoration: none; cursor: pointer; >#slide h3 < margin-bottom: 10px; >#slide #open-btn < position: absolute; right: 5px; top: 5px; width: 20px; height: 20px; cursor: pointer; background: url(img/close-btn.gif); > $(function() < var slide = $('#slide'); var contents = $('#slide-contents'); //開くボタン var openBtn = $('#open-btn img'); var btnOpenFlag = false; var openFlag = false; var panelSwitch = function() < //閉じる if (openFlag == true ) < slide.stop().animate(, 500); openBtn.show(); //開くボタンにする > //開く else if (openFlag == false) < slide.stop().animate(, 500); openBtn.hide(); //閉じるボタンにする > >; //開くボタンクリックしたら $('#open-btn').click(function()< panelSwitch(); openFlag = !openFlag; btnOpenFlag = true; >); //画面下位置を取得 var bottomPos = $(document).height() - $(window).height() - 500; $(window).scroll(function () < if (!btnOpenFlag) < if ($(this).scrollTop() >= bottomPos) < if (openFlag == false) < panelSwitch(); openFlag = true; >> else < if (openFlag) < panelSwitch(); openFlag = false; >> > >); >); 関連記事jQueryで長いページの区切り（セクション）ごとに背景を変化させる
- 投稿日 2011年11月07日
- 更新日 2011年11月07日
jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種
- 投稿日 2011年02月16日
- 更新日 2014年03月21日
jQueryでTwitterのトップページのように一定のタイミングでコンテンツをスライドさせる
- 投稿日 2011年02月25日
- 更新日 2011年04月02日
jQueryでマウスオーバーすると全体的にピカーンってなるやつ
- 投稿日 2011年10月11日
- 更新日 2011年10月12日