[JS・CSS3]特定位置スクロール時に固定出現させたい

Question

ある要素(.hoge)を特定位置("X"px)までスクロールしたらページ下部に固定出現させたいです。
下記JavaScriptコードを使わずに実現する方法をご教授ください。
css3のみの実現などでも構いません。

=

・eval
・alert
・confirm
・prompt
・jQuery
・top
・self
・parent
・XMLHTTPRequest
・document
・window

=

ご教授のほどよろしくお願いいたします。

Answer 1

解決済みなので大変恐縮ですが、
こういうことではないですよね・・？

.test { 
	height:600px;
	background-color:#A7C3F0;
	z-index:3;
	position:relative;
}
.test2 {
	height:400px;
	background-color:#E9F79B;
	z-index:1;	
}
.test3 {
	height:200px;
	background-color:#FCDA8F;
	z-index:1;
}

.hoge{
	padding:10px;
	text-align:center;
	width:100%;
	background-color:#F9BCBC;
	position:fixed;
	bottom:0;
	z-index:2;
}

<div class="test">
高さを固定にしたい奴
</div>

<div class="test2">
その他の要素①
</div>

<div class="test3">
その他の要素②
</div>

<div class="hoge">
固定にするところ
</div>

Comments

[Cf_cwd]

特定のスクロール量(topから見た位置、document.body.scrollTop)に応じてposition : fixedを付けたり外したりするというのが恐らく質問者の方の求めている処理かと思います。

[kwgt]

ある意味この方法でも実現できそうですね。パララックスみたいなものも作れますね。

[webnohito]

ご指摘ありがとうございます！

documentとwindowを使用せずにということでしたので、
ある要素（.test)の高さを決め打ちで決めてしまって
その後ろに、fixedしておいた要素（.hoge）を隠しておけば
スクロールしてきた時に固定しておいた要素が見えてくるようにしてみた感じです。
javascript無しの制限だったものでcssでできる範囲ではこれが限界かなーと言ったところです。

「上から少しスクロールすると　ページ上部へ戻る　ボタンが出てくる」時のイメージなら近しいことができるかな？と思ったんですが。
何らかの条件でjsが使えない状況下という想定で無理やり作ったものなので
あくまでも何かの参考になりましたら幸いです。

ちなみに・・・
※.hogeを下からにゅるっと出すこととかはできないので良くある感じでは作れないです。。
※.testに背景色を付けなければいけないのが弱点です。。

[Cf_cwd]

イメージ的にはボーダーに画像を使用するときに使われる方法と同じで疑似的に再現しようということですね
CSSのみという制限では私もこれが限界だろうと思います
正直実用性を求めるならJSの使用は検討したいですよね……

Answer 2

documentとwindowを使用せずの時点でJavaScriptでは不可能ですね。
全てのメソッドやオブジェクトはwindow(グローバル)の下にありますし。

documentのプロパティを用いて、windowのscrollに対してイベントをセットすることで簡単に実現できると思いますが……。
何故使用できないのか、使用しないのかが分からないことには何とも言えません。

またCSSだけでは実現できないと考えます。
私の知る限りではCSSではイベントをセットできませんし、スクロール量などの検出もできません。
スクロール量の取得などは一般的にJavaScriptで行う物であり、CSSのみで実装した物は軽く調べた限りでは出てきません。(見たこともありませんね)
jQueryを用いたものは当然複数出てきますよね、実装も難しくなくコードとして需要もありますし。

Comments

[castail]

Cf_cwd様

なるほど、やはり上記条件での実現は難しのですね。。。
ご教授頂きありがとうございました。