javascript - 标题在滚动后被捕获并粘住

Question

我希望页眉像这里显示的那样粘在滚动条上。 ( http://davist11.github.io/jQuery-Stickem/ ) 源站点 ( https://github.com/davist11/jQuery-Stickem )

我在页面顶部播放全屏视频，我想滚动并在它点击时让标题保持不变。类似地，其他页面的顶部有一个小边框，我希望滚动错过然后在到达这一点时粘住。

这是现在的样子

http://jsfiddle.net/wp7ornmv/

编辑:在 HTML 窗口上滚动

<div id="logo">
    </div>
    <div id="intro">

        <video autoplay loop poster="images/work/bluesky.jpg" id="bgvid">
            <source src="video/Peri_CloudLoop_BlueTV.webm" type="video/webm">
            <source src="video/Peri_CloudLoop_BlueTV_3.mp4" type="video/mp4">
        </video>
    </div>
    <div id="container">
        <div id="content">
            <div id="Mbackground">
                <div id="Ncontainer">
                    <div id="Ncontain">

                        <div id="Nlogo">Logo
                        </div>
                        <div id="Nmenu">
                            <div class="Nlink"><a href="url">Contact</a>
                            </div>
                            <div class="Nlink"><a href="url">About</a>
                            </div>
                            <div class="Nlink"><a href="index.html" class="active transition">Work</a>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div id="Mbackground">
                <div id="Mbody">
                <div class="Mrow">
                    <div class="Mcontainer">
                        <a href="project.html" class="transition">
                            <span class="link-spanner"></span>
                        </a>
                        <div id="Mimageone" class="Mimage">
                        </div>
                        <div id="Mborderone" class="Mborder">
                        </div>
                        <div id="Mboxone" class="Mbox">
                            <div class="Mtext">
                                <div class="Mtitle">Title
                                </div>
                                <div class="Msubtitle">Subtitle
                                </div>
                                <div class="Mdescrip">Descript
                                </div>
                            </div>
                            <div class="Meye">
                            </div>
                        </div>
                    </div>
            </div>

        </div>
    </div>
    <div id="footer">
        <div id="footerhalf1">
        </div>
        <div id="footerhalf2">  
            <div id="footercontents">Made by
            </div>
        </div>

    </div>

Answer 1

这是 stickem 支持的 javascript 行为。你可能会找到它 HERE

只需确保您的容器有一个position relative 并且您的侧边栏有一个position:fixed;顶部:0； left:auto 然后你就完成了。

这种技术在侧面板上运行广告的网站上很常见。网上有很多关于此的复杂信息，我向您保证，使用您提供的演示源以及 stickem jquery 库，您将很快完成。

祝你好运