如何引导导航栏静态固定在滚动上? [英] How to Bootstrap navbar static to fixed on scroll?

问题描述

我想让静态导航栏在滚动时固定导航栏，当它到达页面顶部时.

I would like to make static navbar to fixed navbar on scroll, when it reaches top of the page.

有没有办法使用 bootstrap 3 css 或 javascript 来获取它?

Is there a way to get it using bootstrap 3 css or javascript?

推荐答案

如果我没记错的话，您要实现的目标称为粘性导航栏.

If I'm not wrong, what you're trying to achieve is called Sticky navbar.

用几行 jQuery 和滚动事件很容易实现:

With a few lines of jQuery and the scroll event is pretty easy to achieve:

$(document).ready(function() {

    var menu = $('.menu');
    var content = $('.content');
    var origOffsetY = menu.offset().top;

    function scroll() {
        if ($(window).scrollTop() >= origOffsetY) {
            menu.addClass('sticky');
            content.addClass('menu-padding');
        } else {
            menu.removeClass('sticky');
            content.removeClass('menu-padding');
        }
    }

    $(document).scroll();

});

我已经为您做了一个快速的工作示例，希望对您有所帮助:http://jsfiddle.net/yeco/4EcFf/

I've done a quick working sample for you, hope it helps: http://jsfiddle.net/yeco/4EcFf/

要使其与 Bootstrap 一起使用，您只需在 jsfiddle 中添加或删除navbar-fixed-top"而不是sticky"类.

To make it work with Bootstrap you only need to add or remove "navbar-fixed-top" instead of the "sticky" class in the jsfiddle .

这篇关于如何引导导航栏静态固定在滚动上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！