如何使用jquery在html5中創建粘性邊欄？

我有一個文件index.php和aside.php。如何使用jquery在html5中創建粘性邊欄？

我已經創建了aside.php內容。現在，我想將頁面顯示爲粘滯狀態。

爲此，我引用這個鏈接http://codepen.io/pouretrebelle/pen/yvcBz

我掙扎，這裏是添加jQuery和CSS以及如何添加我的現有代碼的確切地點？

任何人都可以幫助我嗎？提前致謝。

aside.php：

<?php 
?> 
<aside class="sidebar"> 
<div class="inside"> 
<section id="content"> 
     <!--Start Login Form --> 
     <form action=""> 
      <h1>Login Form</h1> 
      <div> 
       <input type="text" placeholder="Username" required="" id="username" /> 
      </div> 
      <div> 
       <input type="password" placeholder="Password" required="" id="password" /> 
      </div> 
      <div> 
       <input type="submit" value="Log in" /> 
      </div> 
     </form> 
       <!-- End form --> 
</section> 
     </div> 
      <!-- Youtube palyer-1 --> 
    <div class="inside"> 
    <section class="content"> 
    <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="315" height="184" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}"> 
    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /> 
    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' /> 
    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' /> 
    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 --> 
    <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 --> 
    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> 
    </video> 
    </section> 
    </div> 
       <!-- Youtube palyer-2 --> 
    <div class="inside"> 
    <section class="content"> 
    <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="315" height="184" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}"> 
    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /> 
    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' /> 
    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' /> 
    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 --> 
    <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 --> 
    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> 
    </video> 
    </section> 
    </div> 
        <!-- Facebook Page --> 
    <div class="inside"> 
    <section class="content"> 
<div class="fb-like-box" data-href="https://www.facebook.com/FacebookDevelopers" data-width="315px" data-colorscheme="dark" data-show-faces="true" data-header="true" data-stream="true" data-show-border="true"></div> </section> 
    </div> 
    </aside>

CSS：

/* aside */ 
aside { 
float: left; 
margin-top:320px; 
padding-top:5px; 
height: 200px; 
position: absolute; 
} 
.inside { 
color:#fff; 
position:relative; 
margin-top:10px; 
}

來源

2014-10-31 deepika

我的網頁看起來像這樣http://postimg.org/image/3xxy7x6mf/ – deepika 2014-10-31 06:44:34

你可以請參閱我的更新的帖子？ – deepika 2014-10-31 07:21:16