私は自分のウェブサイトを設計しており、ヘッダーを常に画面に表示する方法を見つけようとしています。ヘッダーを常に表示する
たとえば、Wikia.comのthis特別ページをご覧ください。ページをスクロールすると、一番下の小さなツールバーが1か所にとどまることに注意してください。ただし、ページの一番下までスクロールすれば、ツールバーは表示されなくなるまで固定された位置にとどまることがわかります。
これは私がやりたいことですが、逆です。ヘッダーはWebページ上の固定位置に置かれますが、表示されていないときは先頭にあります。
私はDynamicDrive.com（別のリンクを投稿できないため、Dockコンテンツスクリプトを検索します）の例を見てみましたが、それはあまりにも気が狂っていました。
誰かがこれを手伝ってくれますか？
ありがとうございます。
〜DragonXDoom
P.S.これで、送信質問ページの右側の[書式設定]ボックスにこの効果があります。
HTML：：
<div id="wrap">
<div id="header"> HEADER </div>
<div id="navigation"> NAVIGATION </div>
<div id="content"> CONTENT </div>
</div>
はJavaScript：
(function() {
var nav = $('#navigation')[0],
top = $(nav).offset().top,
left,
height = $(nav).outerHeight(),
width = $(nav).width(),
fixedClass = 'fixed';
function pageOffset() {
return window.pageYOffset || document.body.scrollTop;
}
$(window).
resize(function() {
left = $(nav).offset().left;
}).
scroll(function() {
$(nav).toggleClass(fixedClass, pageOffset() > top);
if ($(nav).hasClass(fixedClass)) {
$(nav).
css({ 'left': left, 'width': width }).
prev().css({ 'marginBottom': height });
} else {
$(nav).
prev().andSelf().removeAttr('style');
}
}).
trigger('resize');
})();
ありがとうございます！これはまさに私が後にしたものです！ – DragonXDoom
これを解決するには、CSSポジショニングを使用できます。次のリンクには、私が信じる必要があるものに関する指示があります。
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
編集：申し訳ありませんが、私はこれらが同様のヘッダーのために働く必要があり、読み違えます。
http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/
http://davidchambersdesign.com/css-fixed-position-headers/
これらの助けを願っています。
+1固定位置 – JustcallmeDrago
申し訳ありませんが、私はもう少し明確にすべきでした。影響を与えようとしているヘッダーは、私のページの一番上の要素ではありません。 position：fixedを使用すると、ヘッダーはページの真ん中に浮かれます。私は、ユーザーがスクロールして見えなくなるまで通常の要素のように動作するようにしようとします。それから私はあなたの記事で参照するヘッダーのように振る舞いたい。ありがとう、それは私を助けませんでした。 – DragonXDoom
理解しようとしています - 要素がどこかのページの中央にあるので、ユーザーがスクロールを開始し、要素がページの上部を満たしてからヘッダー項目になるようにスティックします。私はjQueryソリューションを検討するかもしれません。要素が表示されているビューポートの上部に触れるときにイベントが必要ですか？ –
ヘッダーまたはフッターを貼り付ける必要がある場合は、常に覚えてください{ position : fixed; }を使用できます。
.header{
top:0;
width:100%;
height:50px;
position:fixed; // this is the key
}
だから、このようにCSSを適用しますユーザーがスクロールしても上に固定したい場合（例：ブラウザウィンドウの上部に貼付）、使用：
.top-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
margin: 0;
}
それともページのに：
.top-bar {
margin: 0;
width: 100%;
}
//header//
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><?php echo SITE_NAME; if(isset($page_title)){ echo ' :: '.$page_title;}?></title>
<meta name="Description" content="<?php echo $SITE_NAME;?>" />
<meta name="robots" content="all, index, follow" />
<meta name="distribution" content="global" />
<link rel="shortcut icon" href="/favicon.ico" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<link href="<?php if(isset($include_file_ext)){ echo $include_file_ext;}?>css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h1><?php echo SITE_NAME;?></h1>
</div>
<div id="navigation">
<ul>
<li><a href="/photosharing/">Home</a></li>
<!--
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact us</a></li>-->
</ul>
</div>
<div id="content">
//footer
</div>
<div id="footer">
Copyright © <?php echo SITE_NAME.' , '.date('Y');?>
</div>
</body>
</html>
//css
body,td,th {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
}
body {
margin-left: 0px;
margin-top: 30px;
margin-right: 0px;
margin-bottom: 0px;
}
.maindiv{ width:690px; margin:0 auto;}
.textbox{ padding:2px 4px; width:200px;}
.submit{ border:solid 1px #008000; background:#008000; color:#FFF; font-weight:bold;}
#container
{
margin: 0 30px;
background: #fff;
}
#header
{
background: #ccc;
padding: 20px;
}
#header h1 { margin: 0; }
#navigation
{
float: left;
width: 100%;
background: #333;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover { background: #383; }
#content
{
clear: left;
padding: 20px;
}
#content h2
{
color: #000;
font-size: 160%;
margin: 0 0 .5em;
}
#footer
{
background: #ccc;
text-align: right;
padding: 20px;
height: 1%;
}
OPに受け入れられる私の答えは（）により削除されました死んだリンクに。私はjsfiddleでコードとデモを使って答えを更新しました。私は私の答えを削除しないようにしようとします（私はそれを自分で行うことはできません）... –