0
我有一个文件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;
}
我的网页看起来像这样http://postimg.org/image/3xxy7x6mf/ – deepika 2014-10-31 06:44:34
你可以请参阅我的更新的帖子? – deepika 2014-10-31 07:21:16