perfect-scrollbarperfect means... There's no css change on any original element Do not affect the original design layout The scrollbar css is fully customizable The scrollbar size and position can be updated Demo
jQueryでスクロールすると表示する系いろいろ
Posted: 2012.03.08 / Category: javascript / Tag: jQuery, アニメーション 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-
スクロールに応じて背景を変更する
Result jQuery$(function() { var secTopArr = new Array(); var moveFlug = false; var allHeight = $('body').outerHeight(true); var bgImg = new Array('#000','#eee', '#555', '#ccc', '#999'); ////各sectionの位置 $('div.section').each(function (i) { secTopArr[i] = $(this).offset().top; }); var current = -1; //現在位置がセクションの位置より大きい場合は背景切り替え $(window).scroll(function () { for (var i = secTopArr.length-1; i>=0; i-
スクロールに応じて背景を変える
Result jQueryvar $anchors = $('section > a:first-child'), $zone_div = $('#the_zone'), $body = $('body'); function change_bg() { var $win = $(window), $the_zone = $win.height() / 100 * 50; $zone_div.width($win.width()).height($the_zone); $anchors.each(function() { var anchor_pos = $(this).offset().top, zone_pos = $zone_div.position().top + $the_zone; if (anchor_pos < zone_pos) { //ID名をclassとして加える $
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.machu.jp/posts/20110829/p01/
http://joelb.me/scrollpath/
