Javascript 固定标题滚动问题_Javascript_Jquery

Javascript 固定标题滚动问题

javascript jquery

Javascript 固定标题滚动问题,javascript,jquery,Javascript,Jquery,我正在创建一个固定导航，因此当用户滚动并点击导航顶部时，导航位置：固定在屏幕顶部它更像是一个查询，因为当变量“navOffset”在scroll函数内部时，标题会抖动，但在函数外部时，它工作平稳被添加的类“fixed”在内部时不断被添加和删除这是因为它没有时间计算偏移量还是什么？我不知道为什么干杯 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

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

它更像是一个查询，因为当变量“navOffset”在scroll函数内部时，标题会抖动，但在函数外部时，它工作平稳

被添加的类“fixed”在内部时不断被添加和删除

这是因为它没有时间计算偏移量还是什么？我不知道为什么

干杯

<!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>


html，正文{
填充：0；
保证金：0；
颜色：#fff；
}
* {
框大小：边框框；
}
博士{
填充：8rem；
}
.标题{
背景：橙色；
}
.a节{
背景：钢蓝；
}
.b节{
背景：橙色；
}
.c节{
背景：紫色
}
.d节{
背景：黑色；
}
页脚{
背景：红色；
}
导航{
背景：#333；
颜色：#fff；
填充：3rem 0；
文本对齐：居中；
}
导航ul{
显示：内联块；
}
李海军{
显示：内联块；
右侧填充：5px；
}
.固定{
排名：0；
左：0；
宽度：100%；
位置：固定；
z指数：10000；
}
标题

A节
B节
C节
D节

A节
B节
C节
D节
（功能（）{
$（文档）.on（“滚动”，函数（）{
var navOffset=$（“nav”）.offset（）；
var scrollTop=$（document.scrollTop（）；
如果（滚动顶部>导航偏移量.top）{
控制台日志（scrollTop）；
美元（“nav”）.addClass（“固定”）；
}否则{
$（“nav”）.removeClass（“固定”）；
}
});
}());

试试这个。我更改了var navOffset=$（“nav”）.position（）；

（函数（）{
$（文档）.on（“滚动”，函数（）{
var navOffset=$（“nav”）.position（）；
var scrollTop=$（document.scrollTop（）；
console.log（导航偏移量）
如果（滚动顶部>导航偏移量.top）{
控制台日志（scrollTop）；
美元（“nav”）.addClass（“固定”）；
}否则{
$（“nav”）.removeClass（“固定”）；
}
});
}());问题在于，仅当scrollTop
大于navOffset.top
时才检查。但是，当它被适当地固定时，它们将是相同的。因此，只要将求值更改为大于或等于==>if（scrollTop>=navOffset.top{
）