Question

我有一个非常基本的CSS模板。我目前正在尝试添加左侧浮动侧栏。我在滚动事件中使用了一些jquery。问题是边栏根本没有浮动或滚动页面。另外，如果页面宽度发生变化，如何调整侧边栏。我如何完成以下任务：JSFIDDLE。这是LIVE EXAMPLE

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;
}

Answer 1

这里试试这个：

      <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！

Answer 2

我在“实例”中看到所有脚本都在本地调用...也许尝试指向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>

我理解版本不同，但也许这就是问题???

左浮动侧栏css-使用jquery进行滚动事件

2 个答案: