Question

我有一个文件index.php和aside.php。

我已经创建了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;
}

Answer 1

您想要创建一个粘性的aside部分，因为您不需要Javascript，只需CSS通过应用属性position:fixed即可aside div。

以下是示例：jsfiddle.net/nrmgkdne

如何使用jquery在html5中创建粘性侧边栏？

1 个答案: