Question

我正在创建一个固定的导航，所以当用户滚动并点击导航的顶部时导航是位置：固定在屏幕的顶部。

它更像是一个查询而不是其他任何东西，因为当变量'navOffset'在滚动函数内部时，标题会抖动，但是当它在函数外部时它会顺利运行。

添加的“固定”类会在内部添加和删除。

这是因为它没有时间计算偏移量或其他东西吗？我找不到原因。

干杯

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style media="screen">
            html, body {
                padding: 0;
                margin: 0;
                color: #fff;
            }
            * {
                box-sizing: border-box;
            }
            .pd {
                padding: 8rem;
            }
            .header {
                background: orangered;
            }
            .section-a {
                background: steelblue;
            }
            .section-b {
                background: orange;
            }
            .section-c {
                background: purple
            }
            .section-d {
                background: black;
            }
            footer {
                background: red;
            }

            nav {
                background: #333;
                color: #fff;
                padding: 3rem 0;
                text-align: center;
            }

            nav ul {
                display: inline-block;
            }

            nav li {
                display: inline-block;
                padding-right: 5px;
            }

            .fixed {
                top: 0;
                left: 0;
                width: 100%;
                position: fixed;
                z-index: 10000;
            }
        </style>
    </head>
    <body>
        <div class="header pd">
            <h1>Header</h1>
        </div>
        <nav>
            <ul>
                <li>Section A</li>
                <li>Section B</li>
                <li>Section C</li>
                <li>Section D</li>
            </ul>
        </nav>
        <div class="section-a pd">
            <h3>Section A</h3>
        </div>
        <div class="section-b pd">
            <h3>Section B</h3>
        </div>
        <div class="section-c pd">
            <h3>Section C</h3>
        </div>
        <div class="section-d pd">
            <h3>Section D</h3>
        </div>
    </body>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
    <script type="text/javascript">
    (function(){

        $(document).on("scroll", function(){
            var navOffset = $("nav").offset();
            var scrollTop = $(document).scrollTop();

            if(scrollTop > navOffset.top) {
                console.log(scrollTop);
                $("nav").addClass("fixed");
            } else {
                $("nav").removeClass("fixed");
            }
        });
    }());
    </script>
</html>

Answer 1

试试这个。我改变了var navOffset = $（“nav”）。position（）;

unique_ptr

Answer 2

问题是您只检查scrollTop 大于 navOffset.top的时间。但是，当它被适当地修复时，它们是相同的。因此，只需将评估更改为大于或等于 ==＆gt; if(scrollTop >= navOffset.top {）。

修复了标题滚动问题

2 个答案: