css jquery粘性导航栏前景

Question

我正在尝试将粘性导航栏添加到我的“Lexus Extroic”opencart 模板中。这个非常困难。我的代码：

<script>
$(document).ready(function() {
    $(document).scroll(function () {
        var scroll = $(this).scrollTop();
        var topDist = $("#header-layout").position();
        if (scroll > topDist.top) {
            $('nav').css({"position":"fixed","top":"0"});
        } else {
            $('nav').css({"position":"static","top":"auto"});
        }
    });
});
</script>

但结果并不好。这是结果的页面： http://45.55.74.161/index.php?route=common/home

这是我的原始模板： http://azbay.az

Answer 1

粘性导航非常棘手。您应该使用引导程序（一个 css 库）并应用导航类“navbar-fixed-top”以始终将其保持在页面顶部。