为什么我的水平滚动网站会丢失导航栏?

时间:2012-07-08 01:15:20

标签: jquery html css horizontal-scrolling

这是网站: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>

当您查看第二个链接时,它会滚动到右侧框,但导航会离开屏幕。我不太确定我做错了什么。欢迎就此提出建议。

由于

1 个答案:

答案 0 :(得分:1)

.content_nav { position:fixed; }您要找的是什么?有了这个设置(并根据您的要求调整),您只需要一个可以在整个时间看到的菜单。

此外,您的CSS缺少content_nav之前的一段时间,因此添加一个(因为它是一个类)并且这些样式应该有效。