2012-07-08 62 views
0

這裏是網站:http://100.365fragments.com/爲什麼我的水平滾動網站會丟失導航欄?

這裏是導航部分的HTML:

  <div class="content_nav">stranger &#35; 
      <a href="#stranger1" class="panel">1</a> | 
      <a href="#stranger2" class="panel">2</a> | 
      <a href="#stranger3" class="panel">3</a> | 
      <a href="#stranger4" class="panel">4</a> | 
      <a href="#stranger5" class="panel">5</a> | 
      <a href="#stranger6" class="panel">6</a> | 
      <a href="#stranger7" class="panel">7</a> | 
      <a href="#stranger8" class="panel">8</a> | 
      <a href="#stranger9" class="panel">9</a> | 
      <a href="#stranger10" class="panel">10</a> | 
      <a href="#stranger11" class="panel">11</a> | 
      <a href="#stranger12" class="panel">12</a> | 
      <a href="#stranger13" class="panel">13</a> | 
      <a href="#stranger14" class="panel">14</a> | 
      <a href="#stranger15" class="panel">15</a> | 
      <a href="#stranger16" class="panel">16</a> | 
      <a href="#stranger17" class="panel">17</a> | 
      <a href="#stranger18" class="panel">18</a> | 
      <a href="#stranger19" class="panel">19</a> | 
      <a href="#stranger20" class="panel">20</a> | 
      <a href="#stranger21" class="panel">21</a> | 
      <a href="#stranger22" class="panel">22</a> | 
      <a href="#stranger23" class="panel">23</a> | 
      <a href="#stranger24" class="panel">24</a> | 
      <a href="#stranger25" class="panel">25</a> | 
      <a href="#stranger26" class="panel">26</a> | 
      <a href="#stranger27" class="panel">27</a> | 
      <a href="#stranger28" class="panel">28</a> | 
      <a href="#stranger29" class="panel">29</a> | 
      <a href="#stranger30" class="panel">30</a> | 
      <a href="#stranger31" class="panel">31</a> | 
      <a href="#stranger32" class="panel">32</a> | 
      <a href="#stranger33" class="panel">33</a> | 
      <a href="#stranger34" class="panel">34</a> | 
      <a href="#stranger35" class="panel">35</a> | 
      <a href="#stranger36" class="panel">36</a> | 
      <a href="#stranger37" class="panel">37</a> | 
      <a href="#stranger38" class="panel">38</a> | 
      <a href="#stranger39" class="panel">39</a> | 
      <a href="#stranger40" class="panel">40</a> | 
      <a href="#stranger41" class="panel">41</a> | 
      <a href="#stranger42" class="panel">42</a> | 
      <a href="#stranger43" class="panel">43</a> | 
      <a href="#stranger44" class="panel">44</a> | 
      <a href="#stranger45" class="panel">45</a> | 
      <a href="#stranger46" class="panel">46</a> | 
      <a href="#stranger47" class="panel">47</a> | 
      <a href="#stranger48" class="panel">48</a> | 
      <a href="#stranger49" class="panel">49</a> | 
      <a href="#stranger50" class="panel">50</a> | 
      <a href="#stranger51" class="panel">51</a> | 
      <a href="#stranger52" class="panel">52</a> | 
      <a href="#stranger53" class="panel">53</a> | 
      <a href="#stranger54" class="panel">54</a> | 
      <a href="#stranger55" class="panel">55</a> | 
      <a href="#stranger56" class="panel">56</a> | 
      <a href="#stranger57" class="panel">57</a> | 
      <a href="#stranger58" class="panel">58</a> | 
      <a href="#stranger59" class="panel">59</a> | 
      <a href="#stranger60" class="panel">60</a> | 
      <a href="#stranger61" class="panel">61</a> | 
      <a href="#stranger62" class="panel">62</a> | 
      <a href="#stranger63" class="panel">63</a> | 
      <a href="#stranger64" class="panel">64</a> | 
      <a href="#stranger65" class="panel">65</a> | 
      <a href="#stranger66" class="panel">66</a> | 
      <a href="#stranger67" class="panel">67</a> | 
      <a href="#stranger68" class="panel">68</a> | 
      <a href="#stranger69" class="panel">69</a> | 
      <a href="#stranger70" class="panel">70</a> | 
      <a href="#stranger71" class="panel">71</a> | 
      <a href="#stranger72" class="panel">72</a> | 
      <a href="#stranger73" class="panel">73</a> | 
      <a href="#stranger74" class="panel">74</a> | 
      <a href="#stranger75" class="panel">75</a> | 
      <a href="#stranger76" class="panel">76</a> | 
      <a href="#stranger77" class="panel">77</a> | 
      <a href="#stranger78" class="panel">78</a> | 
      <a href="#stranger79" class="panel">79</a> | 
      <a href="#stranger80" class="panel">80</a> | 
      <a href="#stranger81" class="panel">81</a> | 
      <a href="#stranger82" class="panel">82</a> | 
      <a href="#stranger83" class="panel">83</a> | 
      <a href="#stranger84" class="panel">84</a> | 
      <a href="#stranger85" class="panel">85</a> | 
      <a href="#stranger86" class="panel">86</a> | 
      <a href="#stranger87" class="panel">87</a> | 
      <a href="#stranger88" class="panel">88</a> | 
      <a href="#stranger89" class="panel">89</a> |     
      <a href="#stranger90" class="panel">90</a> | 
      <a href="#stranger91" class="panel">91</a> | 
      <a href="#stranger92" class="panel">92</a> | 
      <a href="#stranger93" class="panel">93</a> | 
      <a href="#stranger94" class="panel">94</a> | 
      <a href="#stranger95" class="panel">95</a> | 
      <a href="#stranger96" class="panel">96</a> | 
      <a href="#stranger97" class="panel">97</a> | 
      <a href="#stranger98" class="panel">98</a> | 
      <a href="#stranger99" class="panel">99</a> | 
      <a href="#stranger100" class="panel">100</a> 


     </div> 

這裏是CSS:

 body { 
height:100%; 
width:100%; 
margin:0;padding:0; 
overflow:hidden; 
    } 

    #wrapper { 
width:100%; 
height:100%; 
position:absolute; 
top:0;left:0; 
background-color:#ccc; 
overflow:hidden; 
    } 

#mask { 
    width:10000%; 
    height:100%; 
    background-color:#eee; 
} 

.stranger { 
    width:1%; 
    height:100%; 
    float:left; 
    background-color:#ddd; 
} 


.content { 
    width:800px; 
    height:200px; 
    top:20%; 
    margin:0 auto; 
    background-color:#aaa; 
    position:relative; 
} 



.content { 
    width:800px; 
    height:200px; 
    top:8%; 
    margin:0 auto; 
    background-color:#aaa; 
    position:relative; 
} 

    #nav_content { 
      width: 800px; 
      height: 100px; 
      top:60%; 
      margin-left: auto; 
      margin-right:auto; 
      display:block; 
      text-align:center; 
    background-color:#aaa; 

    } 

    content_nav { 
      width: 800px; 
      height: 100px; 
    margin-left: auto; 
      margin-right:auto; 
      display:block; 
      text-align:center; 
    background-color:#aaa; 
    } 

.selected { 
    background:#fff; 
    font-weight:700; 
} 

.clear { 
    clear:both; 
} 


.selected { 
    background:#fff; 
    font-weight:700; 
} 

.clear { 
    clear:both; 
} 

    </style> 

當您查看第二個鏈接,它滾動到然而,正確的方塊,導航會從屏幕上消失。我不太確定我做錯了什麼。歡迎就此提供建議。

感謝

+0

...但是javascript在哪裏? – 2012-07-08 01:18:02

+0

Jeez。好的,每個部分都有相同的菜單,每次都輸入。應該只有一個。 – 2012-07-08 01:20:56

回答

1

.content_nav { position:fixed; }你在找什麼?使用該設置(並根據您的要求進行調整),您只需要一個菜單​​,該菜單將始終顯示。

此外,您的CSS缺少content_nav之前的一段時間,因此添加一個(因爲它是一個類),並且這些樣式應該可以工作。

+0

謝謝你的作品 - 一個明顯的錯誤,但完全滑倒我。只是一件事,第一個鏈接是好的,第二個鏈接仍然向下滾動,其餘的工作正常,滾動回滾也沒問題。任何想法爲什麼第二個鏈接這樣做?抱歉關於編輯你的帖子順便說一句,我錯誤地編輯了錯誤的 – 2012-07-08 07:07:23