Question

所以，我希望有一个标题与这里http://www.blackmesasource.com/的标题类似，唯一的问题是我对javascript和jquery一无所知，有人可以帮助我吗？

Answer 1

很好 - 我刚刚为你敲了 - 这很粗糙，没有跨浏览器测试：

<style type="text/css">

    body {
        padding:0;
        margin:0;
    }

    #hero {
        background-color:#eee;
    }

    nav {
        position:absolute;
        bottom:0;
        left:0;
        background-color:#ccc;
        box-sizing:border-box;
        width:100%;
        padding:20px;
    }

    nav.fixed-position {
        position:fixed;
        top:0;
        bottom:initial;
    }

</style>

<body>

    <div>

        <div id="hero">

            <nav id="nav-menu">
                Your nav here
            </nav>

        </div>

        <section style="height:2000px;">

            content

        </section>

    </div>

    <script type="text/javascript">

        var hero = document.getElementById('hero'),
            nav = document.getElementById("nav-menu"),
            viewportHeight = Math.max(window.innerHeight || 0),
            navOffsetTop = nav.offsetTop;

        hero.style.height = viewportHeight + 'px';

        var hasScrolled = function() {

            var fromTop = document.body.scrollTop || document.documentElement.scrollTop || 0;

            if (navOffsetTop < fromTop) {
                nav.classList.add('fixed-position');
            } else {
                nav.classList.remove('fixed-position');
            }

        }

        window.addEventListener('scroll', hasScrolled);

    </script>

</body>

您可以将其放入一个空文件并在浏览器中运行以查看结果 - 我在Firefox中测试它没有任何问题，但正如我所说，它需要额外的工作;如：

Crossbrowser - 根据您计划提供的IE支持级别，classList可能无效。
优化 - 目前每次用户滚动时都会触发hasScrolled函数，您可能想找到一种方法来限制它。
Global vars - 我没有尝试为JS使用一个漂亮的干净名称空间，这是你可能想要研究的其他内容。

此外，这不需要jQuery，但考虑到我刚刚建议您需要做的事情，您可能需要考虑使用它 - 它主要是crossbrowser，如果你真的不知道JS，它会帮助你很多

Answer 2

您可以在此处查看最佳资源。只需遵循相同的结构https://css-tricks.com/scroll-fix-content/

即可

滚动然后修复到html中的顶部标题

2 个答案: