左浮動邊欄CSS - 使用jQuery的滾動事件

我有一個非常基本的CSS模板。我目前正在嘗試添加左側浮動邊欄。我正在使用一些jQuery的滾動事件。問題是側欄不在浮動狀態，或者根本不在頁面上滾動。另外，如果頁面寬度發生變化，我怎樣才能調整邊欄。我如何完成以下操作：JSFIDDLE。這裏是一個LIVE EXAMPLE 左浮動邊欄CSS - 使用jQuery的滾動事件

HTML

<div class="header"> 
    <div class="content"> 
     <div class = "logo"> 
      <a class="logo" title="" href=""></a> 
     </div> 
    </div> 
</div> 
<!-- floating side bar --> 
<ul id="sidebar-nav" class="nav nav-list"> 
    <li><a href="#">Home</a> 
    </li> 
    <li><a href="#">Blog</a> 
    </li> 
</ul> 
<div class="line"></div> 
<div class="title"> 
    <h1>Content</h1>&nbsp;&nbsp;&nbsp;<h2></h2> 
</div> 
<div class="content"> 
    <div class="pane"> 
     <div class="long-title"><h3></h3></div> 
     <div id="random" style="width: 100%; height: 940px; padding:15px 0 15px 0;"></div> 
     <div class="credits"></div> 
    </div> 
</div>

CSS

/* Side bar */ 
#sidebar-nav { 
    width:150px; 
    border:1px solid #ddd; 
    margin:0; 
    padding:0; 
    float:left; 
} 
#sidebar-nav li { 
    list-style:none; 
    border:1px solid #ddd; 
    margin:10px; 
    padding:2px; 
}

來源

2014-01-12 techAddict82

哪部分不工作？當我向下滾動時，我看到邊欄保持放置...？ – Phlume

@Phlume在jsfiddle中工作在[LIVE示例]（http://holaweblearning.co.nf/dashboard/test.php）側欄不會根據頁面的滾動進行移動。 – techAddict82

現在我明白了。他們有什麼不同？ – Phlume

這裏試試這個：

 <div> 
     <div style="position: fixed; left: 0; top: 65px; display: block"> 
     <ul id="sidebar-nav" class="nav nav-list"> 
      <li><a href="#">HOME</a> 
      </li> 
      <li><a href="#">BLOG</a> 
      </li> 
      </ul> 
     </div> 
     </div>

現在沒有必要使用jquery！

來源

2014-01-13 05:21:54 CodingWonders90

作品。謝謝！ – techAddict82

我看到你的「活生生的例子」，所有的腳本都在當地稱爲...也許嘗試指向了jQuery頁面？

此：

<script src="js/jquery-1.10.2.min.js"></script>

可能工作，因爲這更好：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

我理解的版本是不同的，但也許這是問題???

來源

2014-01-12 21:39:32 Phlume

這不是它在CSS中的jQuery問題。 – techAddict82

左浮動邊欄CSS - 使用jQuery的滾動事件

回答

相關問題