読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

スクロール後ナビゲーションをトップに固定

スクロール後ナビゲーションをトップに固定

  • PCサイズのみの場合
すぐ使えるダミーテキスト - 日本語 Lorem ipsum

f:id:web-0818:20170129042634p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スクロール後、ナビゲーションをトップに固定</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<header class="page-header">
<div class="headerInner">
<h1 class="site-logo"><a href="#"><img src="img/logo.png" alt=""></a></h1>
<nav class="primary-nav">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Recruit</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<div class="dummy">
<p class="section">私は事実毫もこの影響国というのの時にいうましです。じっと先刻に相違目はほとんどその批評うませかもを踏みからいるないにも批評受けるただと、始終には願いですでたまし。正義に思いないのももう昨日にまあないましなら。どうしても大森君で思索空腹まだ破壊にした気分その義務それか尊敬をとしてご講演たまいたなけれて、このほかは私か辞令例外より思いが、岡田さんの方が信念の私をどうもお評価と思ってみんな事業に小観念に考えように単にお乱暴が担がでますば、ほとんどかつて運動をやっですてしまえです点のしないた。すなわちすなわちご自己に分りのはもともと危険としですが、このらにはしうてとして教師に断っているたない。</p>
<p class="section">その所がたのためその自分も何上がしたかと三宅さんで述べたた、菓子の今うというご融和ありでなて、便所の所を個人に今でもの支が昔至るてみるから、少しの今日へ使いこなすとその時がどうも違っでたと考えず事たと、好いんなてそう皆西洋とどまるた事たますた。それで他人かあやふやか開始が出ないから、今日ごろ外国にやまからいるなくうちをご認定の今日と云いたた。今にも初めてできが叱らないますたですば、同時にかくしので通用はそうないたもので。</p>
<p class="section">またご専攻がするからもいるたのたから、半途からも、よくどこか云っばしられだだいうれるたましと送らから、光明もあっとしまいだっまい。はなはだ幾分は現に新というならんから、あなたがは直接中ともその他のごまごまごは強く抱いみようた。私はもっとも発会ののがご忠告はなりといるですんないらして、一十の内々が少々しですとして徴ですて、けれどもこういう人の晩に黙っられるて、それかが何の気を相違と立ち入りてみるなのたませと衰弱知れから尊敬あっいありでし。先方があるいは岡田さんにするとどう終りなんですでた。向さんもどう手へ行っがあるべきのですました。</p>
<p class="section">(ただ辺に考えためですですですてでしょはしうんて、)少々ありた背後より、文部省の鉱脈まで儲けてあっという、精神の意味は場合のためまでするある事にやりでして会得院つけていなというお尻馬んのた。私はほとんど漂にぶつかっますようにあろているでしょ方んてまた少し大分糧引きましう。</p>
<p class="section">それでもそう三人は考をありと、今がどうも提げんならとしと、好かろませませばそれでご仕事がしでない。子分の始めに、こうした自己を今が叱るでも、場合上がそれだけ時間一二五年からししもの自身へ、私か疑わた相当にするです次第はどうしてもはまるがるものんで、けっしてぴたり日本人が長くて、こののに出のが立派たもったいないいうですでし。そこでそんなに当時二十十カ年が誘き寄せるでもは始めなって丁寧なお話にめがけで、羽根でどんなところその時に知れてならたのだ。実にに子弟に個性やりだ一二人偶然にしと、それかもっますて得るたという気が突然出ざるのんから、無論読んのが平凡ますて、さぞ火事へ送ってやりてみでしです。</p>
<p class="section">他人に信じとありとあなたかないものをあるように云っまでなりましんのに、しかし仕方は偉くので入っから、私で徳義で来みるが二人に二人は四人も同時になるていらっしゃるばかりでのでしょ。絶対なだかなっ日本人に勤まりから、こんな人は丁寧よろしゅう同等ないといん事たいもしたくましょ、旨くろのところを行っましょ違まし作っとしばしまいたのるない。</p>
<p class="section">またよそは嫌いうてしでのなはなし、高等ますて怖がっんものないと圧して私の責任の鷹狩にその男を存在してくれなかっます。途をは十分ですすでに焼いといるれまし次第を弟を始めと、衣食にしとか、また国家を叱らとかし馳になり主義、共通んて、まあ行かてなく自分に申しなとつづいて、個性で進んで演壇くらい道などで云わ自己はするです。</p>
<p class="section">あるいは重宝をはこの辺の勝手同人に次第が落ちない中を述べるので単に実在上ってい今に唱え事なく。また私はそのうちの通り越し待っので、発展の飯に抑圧書いない致し方へは払っありですからないは知れたた。</p>
<p class="section">もう私はその勇猛です権力が掘りまでで、批評の力をひょろひょろ知れうへ行かて行っですのない。大分けっして何三三人が返っましのに、国家をは春をもそれから試でなるなてあっずはずから当てるだたら。かつ翌日始終がたに描いてならでないて、忠告をはたして汚辱のようた。全くご失敗にいうようです意味は許さいるですて、この事が今理由仲のいうない。</p>
<p class="section">そんな去就は私ごろが云わけれども平生まで落ちておくのか云っでしますから、そのところ私にますがこちらのがたになりからいて、相違より定めるれ方は、個人の精神といったようやく不思議たたて私もありてならのまして、しかしためから陥りて、それほど何らの攻撃切り上げようだろやむをえなかっ養成も、しきりに私でこういう寸毫に具えがいるでも不審にできせのたもましなとは傾けるものなら。ここ人間をはあるいはそこの権力に目標ない知れのならは行ったたか。何を漫然心へあるなかっ仕事のところをその安心的のよりとどまらず。事実持っいるご不都合に三本大森背後に断りとなるから、ただ善悪で人わ出た上、必要酒がしないて、しばらく小学校の談判もない、方々だけ自分をなると金力を考え人に考えものが叱るた、仕方親しいが三本は私に思う大きくます傍点顔に手段けすみて、どこでも知れて忘れとなっなそうた。</p>
<p class="section">しかしその豆腐の具合とか自分に衣食へという、連れの家をしから十本の見識を否が思うですと通り越したろ。一日もそんな逼が理由で危険に好い底と窮めから、それを目黒かかりますので、結果がなりては昨日の仕儀の学校がすでに錐を聞えるという買収が、どうしてもその鶴嘴に引張っ方にくっついです事た。しかも二円の時の一通りが人が自覚かかわらので、個性の皆独立を起るつもりをできるでまし。この事がするけという驚個性合っますのは光明た。また個人でて表裏飛びのをはしだないて、観念がかりにして自己へ憂豆腐を骨に二円三人申し上げば、彼らで秋刀魚学校かあなたかからもたらすないのに、ない云っから、権力と骨たりをあるでしょです。</p>
<p class="section">それで起っものは子分はありてなりだ、しかも公平公平ない評めより間接の羽根がさた勇猛まし子分を見込みがしでいでためで、どうも面白かろう方でしょ。及び一字に道徳を役に立つて、すでに人間は熊本がいうねというようです邪んいくらに曲げませと教えのを入会の金力に思っからいる事ですて、私を来らば、その料理顔という立派た事で、不愉快です先生にこれからありばおき心で、これからそれのようですのの下宿から、その道で心持のところまで釣ってはごしがしたという訳は、もしつまりの自由になっだろ生涯、熊本の大勢に当然していたしますのだはませかと着るせるのまし。その道が退けせる吉利人は私とか十一月かしかし観念うろついが自分がするせるです方ますて、その三宅さんが、けっしてそれに毫も今の個人は自力の留学を実にしましてし、もちろん不幸の出ないて孤独ましに従ってようませものを考えせるますのに聞いた。その奨励はその方面の生徒といったべきはた、私かの腹の中偽りの内心に対するたたたと[#「載ってかかるですながら、どうも何もその中大森さんという非常なかろ訳にしよなくん。何から世の中というのも小若いのないば、私もこの所、私だけの相違が申して申し上げ取消をそこの国に申しつもりかと掘りで気ない。</p>
<p class="section">まあそれの気はその日の久原君がも出るているませたまでいうたんと、この最初を料簡見るから、自白をめがけば行くでて、それ痛の義務封建、私のだろと言い方、またしっかりないなりた英文、とも、半分のみんなが致し方よし高等な、気分の誤解ほどもけっして入ったのをなくと過ぎてはないだけの事でしょです。大分私は私たり私の男の方が鼻という起っ事ですですますから、途にするでのがは相当出ますでも移ろただから、同時に生涯の何を盲動使いこなすといば、そののの何かを出ように読んせるのた。何ともこのここは首かもは高等ですきまって、ともかく意味などから重きへ思い国家には認めたべからたで。</p>
<p class="section">ぴたり呼びつけでもっとも瞑ってならましない。その保留を考えが、重です時間の申へ申すと、何しろ岡田さんのように、私にお話し見る弊害となりていないのう。そうましない下宿として、同時に大森さんって射しです安心をしでしょ事ますでしょない。</p>
<p class="section">結果は岡田さんに嚢むずかしかっ中にずいぶんなるですその間には立ちたたて、空虚ずからそれとあっ今日を、影響ありば得るものた。沙汰をもしそのためが済んと始めなけれでから、少々何者から突き破って徳義から越しようにいるんが、つまりこう申すものな。あなた個人は高等です文芸の集って、自由ない資格にそう学習に云わてなら、ところがその道の仲的また諸君的の仮定で多年するとい。私なば私なったようざるつもりと、のさっそくそれの経るながらおくが、落第がしたとしれるのは、同時に今日逡巡しずご証拠に目黒の金力が妨害するないようですのず、縁は慣例でて、一日触れて来るたらという関係ばかりでかと関係考えれのあり。</p>
<p class="section">はっきりへ申し上げるが、あなたのようう事がは、私をなて十一月団のいうている信念の博奕の話ののに極めて立派だけ怒り、つまりあるいは旨くでとは思うれものる。恐らくそれがしべき以上に、実にその胃の自己へかもなっていますないて、そのうち科学た批評がないと眺めるまでじゃ、そのまでの自我をいうて私の話がおあるで防ぐ意外です主義通りだけも起っでと聴このたてそんな事んます。これからそうその意味をありかと考えば、そのそれはもう場合云えこの答弁らの主義に入れですとなりだものとある訳まし。どうかシャツにお話貼りでしょのだはなかっものですが、その我をなっべき本位に私に開始ならからくれるたのう。</p>
<p class="section">この国家の私は修養飛び子分なり彼らがしと足の間でできがいいかあるなくませだけの立ち竦ん首たますば、もしくはむしろ辞令で好いとならて、先方があるがさからしまうありという、馳走院になりでいのですはですて、周旋院を触れかなるでかの仕方はちっとも、私かに被せる肝心に掘りでて、さぞそのご免がまし国こういう一つに関して反抗が話持っな今ませんん。その近頃あれの寄宿舎へ二人落ちつけでん。しかしそれの逼はみんなに威張っからもち重です訳に致すから、あなたののないも、できるだけ落第行っせんようない道具にするて、道もこの先生でありでからならですのかまでと出て込また事た。例えばその警視総監は不行届たんとも次で考えれなと至るたて、私もわざわざ程度へした時勢が、倫理から世の中方して切らませのた。</p>
<p class="section">そのの妨害者をは私でし応かはなはだ聞きならずものですから、同時に勝手だのです。</p>
<p class="section">しかしながらよし金力にししてならて、つい云うましてもし当否に乗っばおかた安心院のものも唱道とか相場から承です方だ。しかも何だか一人の家ががた海鼠の危急存亡を立つのが潰れるたござい。そのあとはやつという人なたか事実はいうが始めんた。ある程度悪いももし正しいないてうらしく。私くらい日本年の繰り返したり行って出しだべき。</p>
<p class="section">また、けっしてそのうちにその英国屋の文学を永続あるれるですと、こうした何にかごが通知式の自分が云わのに、また一遍まで話云いているだまし、どんな新たますご教授にするて、ない頃にどこ無理矢理に満足がなっ責任はむしろ疑わませたばかりするたまし。私にその義務で今まではありてしとっなというのは、素因は怒っです、あなたを講演心の態度に抑圧あるて、あなたがたて立の礼のように自分あるれれがいる演壇にはするないんか。彼らはどう詐欺帰りに活動よるてを毎日のそれという全く辺なさんと足りた。</p>
<p class="section">これは一生など横着が行っばならた自分ますからという就職には、九月の失敗に公平たご存じずてとなって聴いているますものな。</p>
<p class="section">そこは希望めも満足出来んて、権力までは云いばならだなら。私に今よりなるない道は出るていたたのですけれども他愛が仕上るなう。その筆がなりばそれより達しないと換えるでか?その示威は将来と思うから煩悶の錐は肝心お話ませです。そこをしては永続の書はなろのでしまいですようにあるられるのだ。気分は遅まきを講演ますためんんものたなかろ。</p>
<p class="section">私のようですのなど自由故意と、大丈夫辺にもしよく自分へ云っでらしく。私も失礼性質に運動好まて過ぎるた文壇が事実教育がして、容易上部のものをは窮屈な批評を断っているですて、性質が温順う魚籃を祟っとならでしょた。始終何にないて気質たり、個性的なく、しばしば人が打ちてつけなけれとして仕方をありますたくが、明らめれるれませのは先刻た。私もあなたの国家及ぼすわがまま圏外の国家の権力のためをやるせて、私より這入るようですのになって、権力には損害をさられては、詞にいだあなたになりと答えて専攻されるうで。</p>
<p class="section">皆は尻をよろしゅう末を、高等のご気分意味たが、なぜ本位ともいうと切っでほどよくんだとするながら、その発見に繰りいだ事です。</p>
</div>
</body>
</html>


f:id:web-0818:20170130002938p:plain


f:id:web-0818:20170130003302p:plain


@charset "UTF-8";

/* reset
-------------------------------------*/
html, body, h1, p, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { vertical-align: middle; }

/* layout
-------------------------------------*/
body {
  background-color: rgb(240, 240, 240);
  color: rgb(0, 0, 0);
  min-width: 960px;
  padding-top: 240px;  /* ナビゲーションまでの空きを設定 */
}

.dummy {
  max-width: 42em;
  margin: 0 auto;
  padding: 6em 0;
}
.section {
  line-height: 1.5;
  font-size: 1.0em;
}
.page-header {
  background-color: rgb(255, 255, 255);
  position: absolute;
  width: 100%;
  min-width: 960px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

/* スティッキー状態のスタイル 
-------------------------------------*/
.page-header.sticky {
  position: fixed;
  top: 0;
}
.page-header>.headerInner {
  margin: auto;
  width: 960px;
}
.no-boxshadow .page-header {
  border-bottom: 1px solid rgb(204, 204, 204);
}

/* Logo 
-------------------------------------*/
.site-logo {
  float: left;
  margin-left: -20px;
}

/* Primary nav
-------------------------------------*/
.primary-nav {
  float: right;
  height: 65px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.primary-nav li {
  float: left;
}
.primary-nav a {
  display: block;
  padding: 0 1.36em;
  line-height: 65px;
  transition: 0.8s;
}
.primary-nav a:hover {
  background-color: rgb(240, 240, 240);
}
$(function() {
  
  var $header = $('.page-header');
  $(window).scroll(function() {
    if ($(window).scrollTop() > 160) {
      $header.addClass('sticky');
    } else {
      $header.removeClass('sticky');
    }
  });

});