月別: 2015年2月 | みやこデザイン｜京都のWEB＆SEOコンサルティングオフィス

いわゆるスティッキーヘッダー

スティッキーなヘッダーを作る。

$(function () {
    $('#header').each(function () {
        var $window = $(window), // Window オブジェクト
            $header = $(this),   // ヘッダー
            // ヘッダーのクローン
            $headerClone = $header.contents().clone(),
            // ヘッダーのクローンのコンテナー
            $headerCloneContainer = $('<div id="sticky-header"></div>'),
            // HTML の上辺からヘッダーの底辺までの距離 = ヘッダーのトップ位置 + ヘッダーの高さ
            threshold = $header.offset().top + $header.outerHeight();
        // コンテナーにヘッダーのクローンを挿入
        $headerCloneContainer.append($headerClone);
        // コンテナーを body の最後に挿入
        $headerCloneContainer.appendTo('body');
          $window.on('scroll', function () {
            if ($window.scrollTop() > threshold) {
                $headerCloneContainer.addClass('visible');
            } else {
                $headerCloneContainer.removeClass('visible');
            }
        });
        // スクロールイベントを発生させ、初期位置を決定
        $window.trigger('scroll');
    });
});

$(function () {

$('#header').each(function () {

var $window = $(window), // Window オブジェクト

$header = $(this), // ヘッダー

// ヘッダーのクローン

$headerClone = $header.contents().clone(),

// ヘッダーのクローンのコンテナー

$headerCloneContainer = $('<div id="sticky-header"></div>'),

// HTML の上辺からヘッダーの底辺までの距離 = ヘッダーのトップ位置 + ヘッダーの高さ

threshold = $header.offset().top + $header.outerHeight();

// コンテナーにヘッダーのクローンを挿入

$headerCloneContainer.append($headerClone);

// コンテナーを body の最後に挿入

$headerCloneContainer.appendTo('body');

$window.on('scroll', function () {

if ($window.scrollTop() > threshold) {

$headerCloneContainer.addClass('visible');

} else {

$headerCloneContainer.removeClass('visible');

}

});

// スクロールイベントを発生させ、初期位置を決定

$window.trigger('scroll');

});

　これは本を参考にした。でもね、スティッキーではロゴ画像を変えたかったんだな。これって以外と単純な方法でできるんやんね。つ…

2015年2月25日カスタマイズBy takaomi

カウンターを設置、画面に現れたら一回だけ実行する。

　カウントアップ用カウンターを作った。これは簡単だ。画面に表示したらというタイミングコントロールも自分で書ける。しかし、これを組み合わせると、どうしてもスクロールすることに実行されてしまう。つまり、画面を動かす度にカウン…

2015年2月17日全般By takaomi

画面に表示されたらアニメーションを実行するjquery

jqueryはプラグインが色々あって便利だけど、ヘッダを見たときやたらプラグインを読み込んでいるのは格好いいとは言えない。
だから自分で書けるものは自分で書くのがよろし。

さて、プログレスバーを動かすのに、ページの下の方にあるやつは、タイミングをコントロールしないと動きが見えない（スクロールするまでにアニメーションが終わっちゃう）。

なので、それをコントロールするためのスクリプトがこちら。

$(function(){
	var triggerNode = $("div.progress-bar");
	$(window).scroll(function(){
		var triggerNodePosition = $(triggerNode).offset().top - $(window).height();
		if ($(window).scrollTop() > triggerNodePosition) {
				$.each($('div.progress-bar'),function(){
				$(this).css('width', $(this).attr('aria-valuetransitiongoal')+'%');
			});
		}
	});
});

$(function(){

var triggerNode = $("div.progress-bar");

$(window).scroll(function(){

var triggerNodePosition = $(triggerNode).offset().top - $(window).height();

if ($(window).scrollTop() > triggerNodePosition) {

$.each($('div.progress-bar'),function(){

$(this).css('width', $(this).attr('aria-valuetransitiongoal')+'%');

});

}

});

動いてるよ～。

2015年2月14日カスタマイズBy takaomi

Monthly Archives: 2月 2015

いわゆるスティッキーヘッダー

カウンターを設置、画面に現れたら一回だけ実行する。

画面に表示されたらアニメーションを実行するjquery