css jquery粘性导航栏前景

Question

我正在尝试将粘性导航栏添加到我的＆＃34; Lexus Extroic＆＃34; 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

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