粘性NavBar onScroll? [英] Sticky NavBar onScroll?

问题描述

我目前正在为自己建立一个网站，我发现导航栏在图像下方的多个站点上具有非常棒的效果，但是当您滚动浏览它时，它会停留在顶部.

I'm currently building a site for myself, and I found this really awesome effect on multiple sites where the navbar is below an image, but when you scroll past it, it sticks to the top.

示例

我该如何实现?另外，如何在此网站上以类似的导航栏样式达到类似效果?

How can I achieve this? Also, how can I achieve an effect similar to the one on this website with a similar navbar style?

推荐答案

@Matthew在这里谈论的内容是

Here is what @Matthew was talking about:

var num = 200; //number of pixels before modifying styles

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > num) {
        $('.menu').addClass('fixed');
    } else {
        $('.menu').removeClass('fixed');
    }
});

希望有帮助，我使用了引导导航栏.

Hope it helps, I used bootstrap navbar.

这篇关于粘性NavBar onScroll?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！