サンプルページ　　　常駐コンテンツ28

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　常駐ｺﾝﾃﾝﾂ28　　always_ontop28.htm

浮遊・ﾌﾛｰﾃｨﾝｸﾞ（ｽｸﾛｰﾙ時も定位置保持）のDIVに、ﾍﾟｰｼﾞ内ﾊｲﾊﾟｰﾘﾝｸを搭載（≠ﾍﾟｰｼﾞ外ﾊｲﾊﾟｰﾘﾝｸ）。　　　　　　jQuery、DHTML。　　　　　　ﾍﾟｰｼﾞ内ﾊｲﾊﾟｰﾘﾝｸ、配色などのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　all 対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。

ﾃﾞﾓは、”ﾍﾟｰｼﾞ内ﾊｲﾊﾟｰﾘﾝｸ”のｸﾘｯｸ、ﾍﾟｰｼﾞのｽｸﾛｰﾙなどで。

< ご使用方法 >

　・　ﾛｰｶﾙ（=PC）への保存は、always_ontop28/をｸﾘｯｸ開いたﾎﾙﾀﾞｰで、always_ontop28.htm、001444757.js を右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。　　　　※: 変わってしまった、ﾌｧｲﾙ名や、*.html 中のﾊﾟｽは要修正。

　・　このDHTMLの実装方法は、always_ontop28.htm をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどのHTML挿入/編集ﾒﾆｭｰなどを使って、新しいﾍﾟｰｼﾞ 1 や hogehoge.html（=任意の挿入先ﾌｧｲﾙ名）の、 <head>　～　</head> の任意の行間に (*1)を、さらに <body>　～　</body>の任意の行間に (*2) をﾍﾟｰｽﾄします。

　･　編集方法は、hogehoge.html を WordPad や SmipleTextなどのﾃｷｽﾄｴﾃﾞｨﾀｰ、あるいは ”FrontPage Express” などのﾎｰﾑﾍﾟｰｼﾞ制作ｿﾌﾄのHTMLﾀｸﾞ挿入/編集ﾒﾆｭｰで開き編集します。　　　　下記の（例） (*1) と、(*2)、(*3) を参考に太字部分の編集を任意に行います。　　　　※: ﾃｷｽﾄｴﾃﾞｨﾀｰによる編集は、HP制作ｿﾌﾄとの互換性の問題を生じません（HP制作ｿﾌﾄ間は少し生じる）。

　・　作動ﾃｽﾄは、ﾛｰｶﾙ（PC）に保存し、 Internet Explorer 10.x～などで開いて。　　　　更新の確認は、[F5]ｷｰを押し、最新ﾃﾞｰﾀ読み込み、で。　　　　あるいは、Internet Explorerを全て閉じ、再起動を行い、閲覧履歴の削除後や、【Internet Explorer】- [ﾂｰﾙ] - [ｲﾝﾀｰﾈｯﾄｵﾌﾟｼｮﾝ] - [閲覧の履歴] - [削除] などでも。

　･　ｱｯﾌﾟﾛｰﾄﾞや作動ﾃｽﾄは、hogehoge.html と同じ階層〔ﾎﾙﾀﾞｰ/ﾃﾞｨﾚｸﾄﾘｰ〕に、使用する画像、*.js なども転送/配置し実施。　　※：別ﾃﾞｨﾚｸﾄﾘｰに配置時は、*.html 中のﾊﾟｽは要修正。　　　FTPなどで変わってしまったﾌｧｲﾙ名は要修正。　　　　ｽｸﾘﾌﾟﾄ構文中への改行混入は非作動原因。

(*1) ：　always_ontop28.htm （例）　　　　　　　　　挿入先の　<head> ～ </head>　の、～部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　

(*1) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕　

ｼﾌﾄJIS使用（削除不可）

互換表示

ieなどに表示するｱｲｺﾝﾌｧｲﾙ名（削除可）

ﾘﾝｸを新しいWinで開くを標準（削除可）※：target=　いろいろ
同じﾌﾚｰﾑ=_self、ﾍﾟｰｼﾞ全体=_top、親ﾌﾚｰﾑ=_parent

お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）

jQuery
JavaScript

連番　ﾊｲﾊﾟｰﾘﾝｸID

ﾒﾆｭｰ背景色　背景画像
（背景画像　前方の<style優先）
ﾒﾆｭｰ幅

ﾒﾆｭｰ高さ　行間高さ
ﾒﾆｭｰ内余白
ﾊｲﾊﾟｰﾘﾝｸ内余白
太字
選択中ﾊｲﾊﾟｰﾘﾝｸ背景色

<title>サンプルページ　　常駐コンテンツ28</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="001444757.js"></script>
<script>
jQuery(function($) {
$(document).ready(function() {
$('.navbar').stickUp({ parts: {0: 'top', 1: '1', 2: '2', 3: '3', 4: 'edit', 5: '4', 6: '5', 7: '6', 8: '7', 9: '8', 10: '9', 11: '10', 12: '11', 13: '12', 14: '13'}, itemClass: 'menuItem', itemHover: 'active' });8
});
});
</script>
<style>
.navbar{
background:#FFF url('http://www …… /36bar_gr.jpg');
color:#FFF;
width: 100%;
}
.nav{ height:20px;line-height: 20px}
ul { padding-left: 20px;}
li { list-style:none;float:left;padding:0 10px;margin-right: 10px: }
li a { color:#FFF;text-decoration: none; font-weight: bold}
li.active { background: #6F45E5;}
</style>

</head>

(*2) ：　always_ontop28.htm （例）　　　　　　　　挿入先の　<body> ～ </body>　の、～部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　

(*2)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕

ﾒﾆｭｰﾊｲﾊﾟｰﾘﾝｸ　ﾀｰｹﾞｯﾄ　表示ﾃｷｽﾄ

ﾍﾟｰｼﾞ内ﾌﾞｯｸﾏｰｸ（ｱﾝｶｰ）

以下、同様。

”Back to Top” ｱｲｺﾝ画像URL

ｱｲｺﾝ　　画像URL

==== この間､説明を省略｡ ====

<p id="top">　</p><br/>　<p>　</p>
<p> <a target="_top" href="http://www　……　.html">ﾎｰﾑ</a>　へ　　　　　　　<font size="3"><b>ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　常駐ｺﾝﾃﾝﾂ28</b></font>　　<a target="_blank" href="../always_ontop28/always_ontop28.htm">always_ontop28.htm</a></p>
　

==== この間､説明を省略｡ ====

href="http://msdn.microsoft.com/ja-jp/library/ms256177(v=vs.80).aspx">〃ﾘﾌｧﾚﾝｽ</a>、<a href="http://msdn.microsoft.com/ja-jp/library/cc409712.aspx">DHTML</a>。</p>
<p>　</p>

<p id="1">　</p><br/>　<p><a name="(*1)"></a></p>

<p><span style="color: #990022">(*1)</span>
　

==== この間､説明を省略｡ ====

<p id="4">　</p><br/>　<p><a href="#" onClick="location.href='#top' "target="_self" style="color: #3C0055; text-decoration: none; background-color: #FBFAFE"><img
title="ｸﾘｯｸ → このﾍﾟｰｼﾞのﾄｯﾌﾟ行へ" border="0" src="http://www　……　/uparrow.gif" align="right"></a><br/><img border="0" src="../win7a/114.jpg" width="1024" height="766"></p>
<p>　</p>
　

==== この間､説明を省略｡ ====

(*3) ：　001444757.js （例）　　　　　　　　　ﾃｷｽﾄｴﾃﾞｨﾀｰで開き、編集しhogehoge.htmlと同ﾃﾞｨﾚｸﾄﾘｰに転送・配置します。　

　*.js の編集方法　

(*3)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓の太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕

jQuery(
function($) {

$(document).ready(function(){
var contentButton = [];
var contentTop = [];
var content = [];
var lastScrollTop = 0;
var scrollDir = '';
var itemClass = '';
var itemHover = '';
var menuSize = null;
var stickyHeight = 0;
var stickyMarginB = 0;
var currentMarginT = 0;
var topMargin = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
scrollDir = 'down';
} else {
scrollDir = 'up';
}

==== この間､説明を省略｡ ====

if(varscroll + topMargin < vartop){
$('.stuckMenu').removeClass('isStuck');
$('.stuckMenu').next().closest('div').css({
'margin-top': currentMarginT + 'px'
}, 10);
$('.stuckMenu').css("position","relative");
};

});
});

});
　

< 補足 >　　　　適時参照あれ！。

　・　Wordpad　によるHTMLｿｰｽ（ﾀｸﾞ）を見ながらの直接編集方法。