CSS / HTML：如何让东西变得绝对定位一旦你滚动它 [英] CSS/HTML : how to make something become absolute positioned once you scroll by it

问题描述

我在这里是CSS和HTML的新手，我试图学习如何让一些东西变成绝对定位，一旦你在页面上滚动。

I'm new to CSS and HTML here and I'm trying to learn how to make something become absolutely positioned once you scroll by it on the page.

以下是我的意思示例： http://fab.com/help/ （您不需要帐户即可滚动） 。向下滚动时，顶部的黑色菜单栏消失，白色菜单栏中的我们如何帮助您变得绝对定位。

Here's an example of what I mean: http://fab.com/help/ (you don't need an account to scroll). When you scroll down, the black menu bar at the top disappears and the white menu bar with "How can we help you" becomes absolutely positioned.

我创建了一个示例具有类似的菜单系统，

I created a an example with a similar menu system,

http://jsfiddle.net/jkdbP/

但是我不知道从哪里开始使它成为绝对定位一旦它滚动，非常感谢任何见解！

but I don't know where to start to make it become absolutely positioned once it's scrolled by, thanks a lot for any insights!

推荐答案

查看此jsFiddle： http://jsfiddle.net/ jkdbP / 2 /

See this 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兼容性）来获取页面的滚动偏移量。然后，您可以处理窗口的滚动事件。

You can use jQuery's .offset().top to get the Y-position of your menu, and window.pageYOffset (or document.body.scrollTop for old IE compatibility) to get the page's scroll offset. You can then handle the window's scroll event.

这篇关于CSS / HTML：如何让东西变得绝对定位一旦你滚动它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！