3

I've been trying to change a div from relative to fixed after the window scrolls to a certain distance. It works fine on desktops, but mobile browsers don't fire events until after the scrolling has finished. Facebook found a way to fix this. There's plenty of answers on Stack Exchange saying what they're doing is impossible.

So I want to look at their javascript and see how they did it. The only problem is there's a TON of code. How would I find out the code they're using for a certain nav bar? Is there any way to use Chrome's dev tools to inspect the javascript applied to a div?

Edit: I'm not completely convinced Facebook fixed it. I was scrolling slowly and it worked. But if you flick the page, it still disappears and then reappears as soon as the scrolling stops. Not sure if Facebook did anything different here. Sorry to get anyone's hopes up.

4

1 回答 1

1

如果你去： https ://fbstatic-a.akamaihd.net/rsrc.php/v2/yb/r/-y0w_6fw9Tx.js

并搜索代码：j.getScrollTop()

然后你会得到这个：

k.listen('scroll', null, q.bind(this));

function q() {
    var s = i.getPos(n),
        t = j.getScrollTop();
    if (t > s.y) {
        h.addClass(m, "_5d4y");
    } else h.removeClass(m, "_5d4y");
}

转换为非 facebook 代码将是：

var nav = document.getElementById('nav'),
    offset = nav.getBoundingClientRect().top;

window.addEventListener('scroll', function(e) {
    if (document.body.scrollTop > offset) {
        nav.className = 'nav fixed';
    } else {
        nav.className = 'nav';
    }
});

我创建了一个 jsfiddle，它显示它工作：http: //jsfiddle.net/kmturley/CHK96/1/

于 2013-10-22T23:48:32.060 回答