滚动时,将菜单栏固定在顶部

Question

我见过一些网站,当用户向下滚动页面时,会弹出一个右侧或左侧的框...

此外,注意到这个模板:http://www.mvpthemes.com/maxmag/设计师做得很好,导航栏固定在顶部.

现在,这些是如何完成的？我猜它使用jquery来获取页面的位置并显示框.

你能指导我到哪里可以找到一个片段,这样我就能学会做那样的事情.

Answer 1

通常通过使用一些jquery逻辑来实现此效果,如下所示:

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

这表示一旦窗口滚动超过一定数量的垂直像素,它就会在菜单中添加一个类,将其位置值更改为"固定".

有关完整的实现细节,请参阅:http://jsfiddle.net/adamb/F4BmP/

Answer 2

在此示例中,您可以显示菜单居中.

HTML

<div id="main-menu-container">
    <div id="main-menu">
        //your menu
    </div>
</div>

CSS

.f-nav{  /* To fix main menu container */
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}
#main-menu-container {
    text-align: center; /* Assuming your main layout is centered */
}
#main-menu {
    display: inline-block;
    width: 1024px; /* Your menu's width */
}

JS

$("document").ready(function($){
    var nav = $('#main-menu-container');

    $(window).scroll(function () {
        if ($(this).scrollTop() > 125) {
            nav.addClass("f-nav");
        } else {
            nav.removeClass("f-nav");
        }
    });
});

Answer 3

与adamb相同,但我会添加一个动态变量num

num = $('.menuFlotante').offset().top;

获取窗口内的确切偏移或位置,以避免找到正确的位置.

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

Answer 4

您还可以使用css规则:

position: fixed ; 和 top: 0px ;

在您的菜单标签上.

Answer 5

或者以更动态的方式执行此操作

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

在 CSS 添加类

.fixed {
    position: fixed;
    top: 0;
}