CSS/HTML:一旦你滚动它,如何使某些东西变得绝对定位

Question

我是CSS和HTML的新手,我正在努力学习如何在页面上滚动它后让它变得绝对定位.

这是我的意思的一个例子:http://fab.com/help/(你不需要一个帐户来滚动).向下滚动时,顶部的黑色菜单栏消失,带有"我们如何帮助您"的白色菜单栏变为绝对定位.

我创建了一个类似菜单系统的示例,

http://jsfiddle.net/jkdbP/

但我不知道从哪里开始,一旦它滚动就变得绝对定位,非常感谢任何见解!

Answer 1

看到这个jsFiddle:http://jsfiddle.net/jkdbP/2/

var menuTop = $('.menu').offset().top;
var menuClone = $('.menu').clone().addClass('fixed');

$(window).bind('scroll', function() {
    var scrollY = window.pageYOffset;

    if(scrollY > menuTop) {
        if(menuClone.parent().length === 0) {
            menuClone.appendTo($('.menu').parent());
        }
    } else if(menuClone.parent().length > 0) {
        menuClone.remove();
    }
});

您可以使用jQuery .offset().top来获取菜单的Y位置,以及window.pageYOffset(或者document.body.scrollTop对于旧的IE兼容性)来获取页面的滚动偏移量.然后,您可以处理window的scroll事件.