Divを編集するDiv

私は下にスクロールすると私のタイトルdivが1つの位置に固定されているサイトを作成しようとしています。私はそれを固定すると、左側のナビゲーションボタンが消えて、どこに滞在するかわかりません。Divを編集するDiv

// JavaScript Document 
 
function togglesidebar(){ 
 
\t document.getElementById("navside").classList.toggle('active'); 
 
}

@charset "utf-8"; 
 
/* CSS Document */ 
 
* 
 
{ 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
\t font-family:sans-serif; \t 
 
} 
 

 
#navside 
 
{ 
 
\t position:fixed; 
 
\t width: 200px; 
 
\t height: 100%; 
 
\t background:#fb6542; 
 
\t left: -200px; 
 
\t transition:all 250ms linear; 
 
} 
 

 
#navside.active 
 
{ 
 
\t left:0px; 
 
} 
 

 
#navside ul li 
 
{ 
 
\t color: rgba(230,230,230,0.9); 
 
\t list-style:none; 
 
\t padding:15px 10px; 
 
\t border-bottom: 3px solid #7d4427; 
 
} 
 

 
#navside .toggle-btn 
 
{ 
 
\t position:absolute; 
 
\t left:220px; 
 
\t top:20px; 
 
} 
 

 
#navside .toggle-btn span 
 
{ 
 
\t display:block; 
 
\t width:30px; 
 
\t height:5px; 
 
\t background:#375e97; 
 
\t margin:5px 0px; 
 
} 
 

 
#title{ 
 
\t margin:0px; 
 
\t padding:0px; 
 
\t width:100%; 
 
\t height:90px; 
 
\t background:#ffbb00; 
 
} 
 

 
#title h1{ 
 
\t text-align:center; 
 
\t line-height:80px; 
 
\t color:#3f681c; 
 
} 
 

 
#photoslide 
 
{ 
 
\t margin:0px; 
 
\t padding:0px; 
 
\t width:100%; 
 
\t height:400px; 
 
\t background:#375e97; 
 
\t position:fixed; 
 
\t z-index:400px; 
 
} 
 

 
#info1 
 
{ 
 
\t top:400px; 
 
\t padding:0px; 
 
\t width:100%; 
 
\t height:2000px; 
 
\t background:#ef2341; 
 
\t filter:alpha(opacity=70); 
 
\t opacity:0.7; 
 
\t position:relative; 
 
\t z-index:500px; 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Flavour Dome</title> 
 
<link type="text/css" rel="stylesheet" href="css/style.css"> 
 
<script src="js/script.js"></script> 
 
</head> 
 

 
<body> 
 
<div id = "navside"> 
 
\t <div class="toggle-btn" onClick="togglesidebar()"> 
 
    \t <span> 
 
     \t 
 
     </span> 
 
     <span> 
 
     \t 
 
     </span> 
 
     <span> 
 
     \t 
 
     </span> 
 

 
    </div> 
 
    <ul> 
 
    \t <li>Home</li> 
 
     <li>Home</li> 
 
     <li>Home</li> 
 
     <li>Home</li> 
 
     <li>Home</li> 
 
    </ul> 
 
</div> 
 
<div id="title"> 
 
\t <h1>Flavour Dome</h1> 
 
</div> 
 
<div id="photoslide"></div> 
 
<div id="info1"></div> 
 
<div id="info2"></div> 
 
<div id="info3"></div> 
 
<div id="footer"></div> 
 
</body> 
 
</html>

今どのように私は私がスクロールしながらタイトルのdiv、INFO1のDIVと私のnavsideボタンが一つの場所に残るような方法で自分のコードを編集するには？他のすべての事業部の上にナビゲートを維持しますか？あなたがしたい各要素に対してtopとともにposition:fixed;、right、bottomとleftを使用する必要が

出典

2017-12-11 ProfMox Providence Moyo

あなたのCSSが間違っているか、SOの書式は、次のいずれかを追加しました。あなたのセレクタ '＃photoslide'と他にも＃とIDの間にスペースがあり無効です。 – timothyclifford

「一つの場所にとどまります。」上、右、下、左の値はピクセル単位です。

出典

2017-12-11 16:02:59 lowry0031

このCSSファイルをHTMLページにコピーします。 #navsideで

、私はいくつかの調整、

margin-top:6%; 
padding-right:5%;

そして#titleで、position: fixed;

@charset "utf-8"; 


/* CSS Document */ 

* { 
    margin: 0 px; 
    padding: 0 px; 
    font-family: sans-serif; 
} 

#navside { 
    position: fixed; 
    width: 200 px; 
    height: 100%; 
    background: #fb6542; 
    left: -200 px; 
    transition: all 250 ms linear; 
    margin-top:6%; 
    padding-right:5%; 
} 

#navside.active { 
    left: 0 px; 
} 

#navside ul li { 
    color: rgba(230, 230, 230, 0.9); 
    list-style: none; 
    padding: 15 px 10 px; 
    border-bottom: 3 px solid #7d4427; 
} 

#navside.toggle-btn { 
    position: absolute; 
    left: 230 px; 
    top: 20 px; 
} 

#navside.toggle-btn span { 
    display: block; 
    width: 30 px; 
    height: 5 px; 
    background: #375e97; 
    margin: 5px 0px; 
} 


#title { 
    margin: 0 px; 
    padding: 0 px; 
    width: 100%; 
    height: 90 px; 
    background: #ffbb00; 
    position: fixed; 
} 

#title h1 { 
    text-align: center; 
    line-height: 80 px; 
    color: #3f681c; 
} 

#photoslide { 
    margin: 0 px; 
    padding: 0 px; 
    width: 100%; 
    height: 400 px; 
    background: #375e97; 
} 

#info1 { 
    top: 500 px; 
    padding: 0 px; 
    width: 100%; 
    height: 2000 px; 
    background: #ef2341; 
    filter: alpha(opacity=70); 
    opacity: 0.7; 
}

出典

2017-12-11 16:19:31

答えて

関連する問題