当滚动时，菜单栏固定在顶部 [英] Leave menu bar fixed on top when scrolled

问题描述

我看过一些网站，当用户向下滚动页面时，一个框将向右或向左弹出...

I've seen some websites that when the user scrolls down the page a box would pop-up to the right or left...

此外，注意到模板： http://www.mvpthemes.com/maxmag/ 设计师做了一个不错的工作，将导航栏固定在顶部。

Also, noticed this template: http://www.mvpthemes.com/maxmag/ the designer does a nice job leaving the nav bar fixed on top.

现在，这些是如何做的？我想它使用jquery获得页面的位置和显示框。

Now, how are these done? I guess it uses jquery to get the position of the page and to show the box.

你能指导我到哪里可以找到一个代码段，以便我可以学习

Can you please guide me to where I can find a snippet so I can learn to do something like that.

推荐答案

这种效果通常通过一些jquery逻辑来实现，如下所示：

This effect is typically achieved by having some jquery logic as follows:

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

这说明一旦窗口滚动过一定数量的垂直像素，

This says once the window has scrolled past a certain number of vertical pixels, it adds a class to the menu that changes it's position value to "fixed".

完整的实现细节参见： http://jsfiddle.net/adamb/F4BmP/

For complete implementation details see: http://jsfiddle.net/adamb/F4BmP/

这篇关于当滚动时，菜单栏固定在顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！