その他■開閉幕３　幕のスクロール上昇

説明文：左端上部の『down』ボタンを押すと、幕(スクリーン)が下りてきます。
幕(スクリーン)には、文章や画像が載せられます。
下りてきた幕(スクリーン)は、画面をスクロールすると自動的にまた上がります。
そしてメニュー部分だけ残り、スクロールしても上部にメニューが固定されます。

実は当サイトのタイトルとメニュー部分は、インラインフレームで呼び出しています。
今回、最初から幕(スクリーン)が落下した状態の中に、インラインフレームで呼び出しました。
そしてこの幕(スクリーン)は、「up」ボタンのクリックではなく、画面をスクロールすることで自動的に上昇します。そしてメニュー部分だけ残して、上部に固定します。
もちろん幕(スクリーン)の中身は、インラインフレームではなく画像や文章でもいいです。

ページを開くと幕(スクリーン)は上がった状態で、ボタンを押して幕(スクリーン)を落下させるその他１ ■開閉幕■　幕(スクリーン)落下上昇を改造しました。
最初から落下した幕(スクリーン)が「up」ボタンで上昇する見本はその他２ ■開閉幕■　幕(スクリーン)上昇落下から。

◆全ソース◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>その他■開閉幕３　幕のスクロール上昇</title>


<!--★ここからコピー-->
<style type="text/css">
<!--
/*★bodyの背景色、文字色指定。お好みで*/
body{background: #dba ;color:#000;}
/*★幕(スクリーン)の指定。#maku必須*/
#maku{     
margin-top:-10px;/*★上端の隙間を消す*/
margin-left:-10px;/*★左端の隙間を消す。不要なら削除*/
position: absolute;/*★絶対位置指定*/
top: 0px; /*★最初から下りてる時は0*/
height: 300px; /*★幕の縦幅。お好みで*/
width:101%;/*★横の隙間が気になる時は100%ではなく101%で*/  
border-bottom:solid 3px #888;/*★幕の下の枠線指定。濃い灰色*/
background:#ccc;/*★幕の背景色　灰色*/
}
/*★downのボタンの大きさと位置を指定*/
input.move{
width:50px;height:20px;margin-left:20px;margin-top:130px;}
-->
</style>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>
<body>

<!--★ここからコピー。説明文の文章は適当に変更して下さい-->
<input type="button" value="down" onclick=" slide(0);" title="下へ移動" class="move">　　
<p style="margin-left:20px;">説明文：左端上部の『down』ボタンを押すと、幕(スクリーン)が下りてきます。<br>
幕(スクリーン)には、文章や画像が載せられます。<br>
下りてきた幕(スクリーン)は、画面をスクロールすると自動的にまた上がります。<br>
そしてメニュー部分だけ残り、スクロールしても上部にメニューが固定されます。</p>

<div id="maku"><!--★幕(スクリーン)部分ここから--> 

<!--★インラインフレームここから。中身はインラインフレームではなく画像でも文章でも可-->
<iframe src="../hd_menu.html" height="300px" width="100%" frameborder="0" scrolling="no" allowtransparency="true" name="header" style="position:absolute; top:0px;display:block;">タイトルメニュー</iframe><!--★インラインフレームここまで-->

</div><!--★幕(スクリーン)部分ここまで-->


<script type="text/JavaScript">
<!--
/*====================================================================
スクリーン上昇落下 By JavaScript の質問用スレッド vol.7　2002/01/27
http://pc.2ch.net/test/read.cgi/hp/1010823511/ レス番号　357
★少し簡略化して残す部分を設定。最初から下りた状態で、残す部分を上部固定化
さらに画面スクロールで、スクリーンが上昇するように設定　　2015/01/13
====================================================================*/
var speed=50; //★速度。数値が大きいほど遅い
var rest=80; //★残す部分の縦幅。完全に閉じる(消す)のであれば 0。残すなら、マージンの関係で少し大きめに数値を設定。50pxくらい残したいなら80を指定。お好みで

var T= -(maku.offsetHeight+20)+rest;  //★maku.offsetHeightはCSSのheightの数値。完全に隠れるように20を足す。
var y = 0;//★最初からスクリーンが下りている時は0
var ddy, count,read;
maku.style.position="absolute";
function slide(gy) { 
ddy = (gy-y)/speed; 
count = speed; 
read=setTimeout(step,speed);
} 

function step(){
maku.style.top = (y+=ddy)+'px'; 
if(--count >= 0) setTimeout(step, speed);
}

window.onscroll=function(){
slide(T);

//★残す部分をスクロールしても動かないように固定。固定不要なら以下の２行は削除。
if(y<=T){maku.style.top=T+"px";maku.style.position="fixed";window.clearTimeout(read);}
else{maku.style.position="absolute";}

}
//-->
</script>
<!--★ここまでコピー-->

<!--★下記の罫線は、スクロールしてもメニュー部分が移動せず固定しているのがわかるように記述してあるだけなので、削除して下さい-->
<hr style="margin-top:1500px;">

<br><br><br>
</body>
</html>

開閉幕３ 幕のスクロール上昇 UP日時 : 2015/01/13

　開閉幕３　幕のスクロール上昇　　　　UP日時 : 2015/01/13