CSS位置修复

时间:2013-07-15 11:32:27

标签: css css3 scroll

我已经设法使用了这个位置:固定设置CSS / CSS3之前并且工作得很好!

我几天前看到了这个,并且想知道他们是如何实现向下滚动时发生的效果,在滚动之前菜单栏位于一个位置,然后到达锁定自身的顶部。< / p>

请参阅link - http://www.cssportal.com/&lt;向下滚动任何页面并观察顶部的蓝色菜单。

我试图查看页面的来源,但我无法做出正面或反面。

有谁知道这个效果叫什么?

1 个答案:

答案 0 :(得分:3)

用javascript完成,添加一个包含position:fixed和其他定位样式的css类来实现你想要的。

这并不复杂。这是一个jquery插件:http://stickyjs.com/

几年前我就是这样做的:

var menu_bar = $("#menu");
var top = menu_bar.offset().top;
var detached = false;

$(window).scroll(function (e) {
    if ($(this).scrollTop() >= top) {
        if (!detached) {
            detached = true;
            menu_bar.addClass('fixed');
        }
    } else {
        if (detached) {
            detached = false;
            menu_bar.removeClass('fixed');
        }
    }
});