Webmemo

Web制作の備忘録

0406−スクロールでナビゲーションを固定させる & SNSシェアボタン設置

こんばんは。土日に出来なかったjQueryがとりあえず動いたのでメモ。

・ライブラリ読み込みの時点でミスしているのか、

スクリプトやセレクタの記述が間違っているかわかる方法を教えてもらいました↓

 $(function($) {
var tab = $(‘nav#items’),
offset = tab.offset();
$(window).scroll(function () {
if($(window).scrollTop() > offset.top) {
tab.addClass(‘fixed’);
$(‘body’).css(‘background-color’,’yellow’)

}else {tab.removeClass(‘fixed’);}

});
});

ボディの色が変われば、とりあえずjQueryは動いていてスクリプトの記述が間違っているとあたりが付きます。

今度からjQueryが動かないときはまずこれで確かめてみようと思います(^v^*

・そしてこちらのZipファイルと解説を元に、表題の動きができました。jQuery基礎講座:スクロール量に応じて要素(ヘッダーなど)を固定する(ZIP付)

・また、各ソーシャルサービスのシェアボタンをJavaScript無しのシンプルなコードで生成するジェネレーターを参考に、固定したナビゲーションの右端にSNSボタンを当てました。

単色のフラットなボタン、まさにこんなデザインのを探してました!Simple Sharing Buttons Generatorさんすごく有り難いツールですね…。

備忘録や記事、ジュネレーターを公開してくれる方に足は向けられません。いつもありがとうございます。


【メモ】

・nav内のフロート、左右paddingの調整で悩んだ。ベストな方法はどういうコーディングなのか?

・一番上のナビをfixにしたほうがいい??navというかheader???


ここまで作業完了。次はSNSボタンホバー時の色替え、メインイメージのスライドを。

スクリーンショット 2015-04-07 03.00.06

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)