Question

我希望标题贴在滚动上，如下所示。（http://davist11.github.io/jQuery-Stickem/）来源网站（https://github.com/davist11/jQuery-Stickem）

我在页面顶部播放了一个全屏视频，我想滚动它并在它击中时有标题棒。同样地，在其他页面的顶部有一个小边框我希望滚动错过然后在到达这一点时粘贴。

这是目前的样子

编辑：滚动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; top:0; left:auto，您就可以完成。

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

祝你好运

滚动后，标题被抓住并粘住

1 个答案: