最近よくあるページがスクロールを始めるとヘッダーの位置が固定するjQueryのスクリプトです。 よく使うのでメモがわりに掲載します。 基本は簡単なので覚えておけばいろいろ応用できるかと思います。 デモはこちら 仕組みは、<header>の高さ分（デモでは80px）スクロールすると<nav>にfixedクラスが追加されることで固定されます。 header { width: 100%; height: 80px; color: #333; background: #EEE; } nav { width: 100%; color: #FFF; background: #333; } nav.fixed { position: fixed; left: 0; top: 0; } $(function() { //ロード or スクロールされると実行 $(window).on('load scrol
タグ
- すべて
- ☆☆☆☆☆ (4518)
- はてなブックマーク (17029)
- デザイン (1303)
- ...えっ!？ (447)
- 4Gamer.net (466)
- Facebook (813)
- Google (1952)
- ITmedia ニュース (3457)
- Mac (718)
- PC (841)
- app (763)
- c (631)
- css (547)
- iPad (701)
- iPhone (2012)
- japan (3517)
- news (7814)
- photoshop (417)
- togetter (2577)
- twitter (1558)
- youtube (3305)
- ♬♫♪ (532)
- あとで読む (583)
- はてな (4446)
- まとめ (2691)
- アプリ (606)
- ゲーム (397)
- サッカー (2244)
- ニコニコ動画 (10644)
- ニュース (4457)
- 仕事 (1062)
- 健康 (545)
- 名前 (3268)
- 国際 (16400)
- 政治 (538)
- 日本 (1182)
- 本 (1601)
- 社会 (855)
- 科学 (408)
- !! (3397)
- !!! (791)
- # |ω・)…… (1198)
- # |ω・）…… (635)
- #お気に入り (408)
- () (692)
- (1) (681)
- (´・∀・｀)y-~~ﾍｰ (619)
- (笑) (458)
- (ﾉ∀`) (2351)
- * (489)
- **スポーツ (3258)
- *News (15938)
- *VOCALOID (441)
- *thresh25 (3247)
- *web制作 (482)
- *あとで (1766)
- *あとで読む (9900)
- *まとめ (501)
- *ネタ (700)
- 2011年 (704)
- 2012年 (3336)
- 2013年 (540)
- 2014 (482)
- 2014年 (483)
- 2ch (8008)
- 2chまとめ (652)
- 2chまとめブログ (827)
- 3D (628)
- 4Gamer.net (944)
- 6月 (755)
- >> (642)
- AFPBB (5673)
- ASCII.jp (702)
- Android (2344)
- Apple (2052)
- CM (407)
- Engadget Japanese (714)
- Evernote (422)
- Facebook (1351)
- GIGAZINE (772)
- IT (3086)
- ITmedia (489)
- ITmedia News (1093)
- ITmedia ニュース (1482)
- J-CASTニュース (1060)
- MMD (1130)
- MarkeZine（マーケジン） (1207)
- Microsoft (554)
- MikuMikuDance (1189)
- MyHotentry (952)
- MyInterest (2851)
- NAVER (1179)
- NHK (1120)
- PC (2648)
- PV (973)
- Publickey (386)
- SEO (1304)
- SF (601)
- SNS (1336)
- SmartNews (698)
- TV (1695)
- UI (1308)
- VIP (1441)
- Web担当者Forum (1193)
- Windows (2313)
- amazon (2727)
- animal (1383)
- animation (682)
- anime (2571)
- app (908)
- art (1004)
- blog (2104)
- blog-neta (1081)
- book (3551)
- bookmark (857)
- books (823)
- business (4506)
- buzz (641)
- by (615)
- camera (401)
- cat (695)
- chrome (445)
- cinema (387)
- cloud (417)
- comic (1206)
- communication (1292)
- cooking (855)
- cookpad (414)
- copyright (671)
- css (1521)
- culture (449)
- design (3281)
- development (1743)
- dpz (1818)
- economy (510)
- education (946)
- english (569)
- event (676)
- fashion (561)
- font (546)
- food (3087)
- football (543)
- gadget (1330)
- game (4805)
- github (401)
- google (3742)
- hatena (2122)
- health (1240)
- history (1133)
- html (1207)
- html5 (815)
- iOS (1749)
- iPad (666)
- iPhone (4619)
- idolm@ster (1711)
- interview (1017)
- jQuery (921)
- japan (932)
- javascript (2165)
- js (455)
- law (467)
- life (3822)
- lifehack (2709)
- lifehacks (409)
- linux (527)
- mac (1451)
- mad (1633)
- management (586)
- marketing (976)
- media (1451)
- medical (514)
- memo (1348)
- mobile (1581)
- money (525)
- movie (1761)
- music (3628)
- neta (4248)
- network (446)
- news (4999)
- newsmemo (492)
- nicom@s (962)
- niconico (3583)
- photo (1795)
- photoshop (535)
- politics (1666)
- programming (3112)
- recipe (1491)
- review (395)
- ruby (558)
- science (2596)
- security (2018)
- server (430)
- society (1598)
- software (1647)
- sports (953)
- study (396)
- technology (798)
- tips (2702)
- togetter (2234)
- tool (1290)
- travel (843)
- twitter (5885)
- unread (557)
- video (495)
- vocaloid (2809)
- web (11340)
- webdesign (1019)
- webservice (1456)
- webサービス (5659)
- webデザイン (3437)
- web制作 (3817)
- work (1630)
- world (400)
- yahoo (401)
- youtube (4287)
- あとで (1367)
- あとでみる (8798)
- あとでよむ (413)
- あとで読む (26619)
- いい話 (470)
- おもしろ (2317)
- おもしろい (555)
- お役立ち (2402)
- お気に入り (826)
- お菓子 (390)
- お金 (625)
- かわいい (1202)
- こころ (585)
- これはすごい (4308)
- これはひどい (7200)
- ぬこ (650)
- ねこ (993)
- ねた (475)
- はてな (4130)
- はてなブックマーク (1101)
- はてな匿名ダイアリー (537)
- はてブ (398)
- まとめ (10316)
- やまもといちろう (538)
- らばQ (1734)
- アイデア (1090)
- アイドル (606)
- アイドルマスター (2259)
- アクセス解析 (411)
- アニメ (5375)
- アプリ (3241)
- アメリカ (1700)
- アート (914)
- イベント (1236)
- イラスト (1023)
- インタビュー (1188)
- インタレスト (2207)
- インターネット (1143)
- インテリア (647)
- エネルギー (423)
- エロ (797)
- エンジニア (796)
- エンタメ (500)
- オタク (781)
- オリミク (750)
- カメラ (774)
- カラパイア (1518)
- ガジェット (987)
- ギズモード・ジャパン (502)
- クックパッド (1217)
- クラウド (590)
- グルメ (1834)
- ゲーム (6369)
- コミュニケーション (2049)
- コンテンツ (409)
- コンピュータ・IT (1105)
- サイエンス (396)
- サッカー (886)
- サーバ (510)
- サービス (1807)
- システム (503)
- ジェンダー (391)
- スポーツ (1924)
- スマホ (524)
- スマートフォン (1539)
- セキュリティ (2435)
- ソフトウェア (1226)
- ソーシャルゲーム (447)
- ソーシャルメディア (416)
- ダイエット (558)
- ダジャレ (1662)
- チュートリアル (390)
- ツール (2297)
- テクニック (426)
- テクノロジー (861)
- テスト (392)
- テレビ (1662)
- デイリーポータルZ (2283)
- デザイン (5088)
- データ (722)
- トンデモ (674)
- ドラマ (481)
- ニコニコ (590)
- ニコニコ動画 (9385)
- ニコニコ技術部 (393)
- ニュース (14644)
- ネタ (24302)
- ネット (3525)
- ネットワーク (511)
- ビジネス (5411)
- ファッション (841)
- フォント (625)
- フリーソフト (960)
- フリー素材 (658)
- ブラウザ (483)
- ブログ (3161)
- プラグイン (403)
- プログラミング (3257)
- ホットエントリ (2147)
- マスコミ (931)
- マンガ (2020)
- マーケティング (2132)
- メディア (2598)
- メモ (679)
- メール (405)
- モバイル (689)
- ライトノベル (410)
- ライフハッカー［日本 (390)
- ライフハック (2486)
- レシピ (3519)
- ロケットニュース24 (437)
- ロシア (424)
- ロボット (412)
- 一般 (896)
- 世の中 (543)
- 世界 (885)
- 中国 (1158)
- 事件 (2492)
- 事故 (709)
- 交通 (748)
- 人物 (434)
- 人生 (5014)
- 人間 (863)
- 仕事 (7952)
- 仕事術 (1261)
- 企業 (2547)
- 会社 (1312)
- 便利 (1319)
- 健康 (2827)
- 写真 (3546)
- 凍てつく波動 (1195)
- 出版 (615)
- 切込隊長 (904)
- 初音ミク (1138)
- 創作 (497)
- 労働 (2151)
- 勉強 (1540)
- 動物 (3500)
- 動画 (6602)
- 医療 (1593)
- 原発 (974)
- 参考 (586)
- 司法 (498)
- 同人 (401)
- 国際 (2258)
- 国際ニュース (4453)
- 地図 (389)
- 地域 (687)
- 地方 (694)
- 報道 (798)
- 増田 (4320)
- 声優 (748)
- 外交 (407)
- 大学 (972)
- 大阪 (603)
- 女性 (939)
- 子供 (566)
- 子育て (523)
- 学び (1618)
- 学習 (804)
- 宇宙 (782)
- 安倍晋三 (442)
- 宗教 (877)
- 小説 (704)
- 差別 (807)
- 広告 (1151)
- 建築 (662)
- 後で読む (535)
- 心理 (1716)
- 性 (699)
- 恋愛 (1239)
- 情報 (6731)
- 戦争 (459)
- 技術 (2526)
- 投資 (480)
- 揉め事 (475)
- 携帯 (402)
- 政治 (6354)
- 教育 (3045)
- 数学 (466)
- 文化 (1876)
- 文章 (725)
- 料理 (3687)
- 旅 (552)
- 旅行 (1663)
- 日本 (5064)
- 日本語 (436)
- 映画 (2200)
- 時間 (577)
- 暮らし (628)
- 書籍 (1205)
- 書評 (650)
- 朝日新聞 (447)
- 本 (4016)
- 東京 (1683)
- 東方 (650)
- 検索 (563)
- 橋下徹 (406)
- 欲しい (488)
- 歴史 (3015)
- 民主党 (429)
- 法律 (654)
- 海外 (2612)
- 漫画 (2430)
- 災害 (619)
- 炎上 (834)
- 無料 (506)
- 犬 (544)
- 犯罪 (1464)
- 猫 (1584)
- 環境 (681)
- 生活 (7909)
- 生活・人生 (832)
- 生物 (1801)
- 男女 (1744)
- 画像 (6382)
- 痛いニュース(ﾉ∀`) (1035)
- 研究 (2150)
- 社会 (15723)
- 福祉 (405)
- 科学 (3622)
- 窓の杜 (1223)
- 簡単 (740)
- 素材 (1317)
- 組織 (470)
- 経営 (1058)
- 経済 (3906)
- 結婚 (938)
- 統計 (810)
- 美容 (539)
- 考え方 (6601)
- 考察 (1089)
- 育児 (830)
- 自動車 (401)
- 自己啓発 (414)
- 自民党 (869)
- 自然 (719)
- 艦これ (793)
- 芸能 (1880)
- 英語 (1246)
- 著作権 (949)
- 行政 (1069)
- 観光 (427)
- 言葉 (1597)
- 言語 (412)
- 読み物 (2681)
- 読書 (926)
- 警察 (506)
- 資料 (1582)
- 起業 (607)
- 軍事 (963)
- 選挙 (716)
- 野球 (605)
- 金融 (525)
- 鉄道 (802)
- 開発 (2764)
- 雑学 (833)
- 電子書籍 (833)
- 韓国 (973)
- 音楽 (4440)
- 食 (5471)
- 食べ物 (684)
- あとで読む (26619)
- ネタ (24302)
- はてなブックマーク (17029)
- 国際 (16400)
- *News (15938)
- 社会 (15723)
- ニュース (14644)
- web (11340)
- ニコニコ動画 (10644)
- まとめ (10316)
*jQueryとtipsに関するkana321のブックマーク (4)
-
kana321 2014/10/07
- jQuery-plugins
- jQuery
- スクロール
- 固定
- スクリプト
- tips
- *jQuery
- *tips
- javascript
- programming
リンク -
-
ページを移動（離脱）するときにjQueryで警告を出す方法
Facebookなどでフォーム入力中にページを移動（離脱）しようとすると警告が表示されます。 この仕組みをjQueryで実装する方法を紹介します。jQueryは投稿時点の最新バージョン1.9.1を利用しています。 １．ページを移動するときに警告を出す ページを移動するときに警告を出すには、onイベントにbeforeunloadイベントを設定します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ $(window).on('beforeunload', function() { return '投稿が完了していません。このまま移動しますか？'; }); }); </script> <form method="post" acti
-
jQuery の on() と off() を理解する - tacamy--blog
初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。 on() ひとつで bind() live() delegate() を表せる jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。 .foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。 bind() $('.foo').bind('click', function(){...}); は $('.foo')
-
1
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
処理を実行中です
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
設定を変更しましたx