javascript - 在页面滚动时更改元素样式

Question

我想在用户向下滚动 100 像素后更改元素的可见性。

我已经有一些代码了，

var fixed = false;
$(document).scroll(function() {
    if( $(this).scrollTop() >= 100 ) {
        if( !fixed ) {
            fixed = true;
            $('#logo-scroll').css({position:'fixed', display:'visible !important'});
        }
    } else {
        if( fixed ) {
            fixed = false;
            $('#logo-scroll').css({display:'none'});
        }
    }
});​

JSFiddle .

代码有两个问题。

1. 它不是默认不可见的，我希望它开始不可见。

2. 它不会重复，当用户向上滚动时，它不会返回到不可见状态。

更多详情，

我想做类似 this 的东西 header ，但是，如您所见，在某个特定点上您会看到小 Logo 的 一半 和较大 Logo 的一部分。它对 techcrunch 的影响不大，因为标题很小，但在我的网站上，它确实如此。一切我都做好了，只需要在display:none中启动，100px后可见即可。

Answer 1

使用:display:block; 和 display:none;

jsFiddle DEMO

将此添加到您的 CSS:

#logo-scroll{ display:none; position:fixed; }

jQ:

var $logo = $('#logo-scroll');
$(document).scroll(function() {
    $logo.css({display: $(this).scrollTop()>100 ? "block":"none"});
});

顺便说一句:在 TC 页面上，它只是一个使用 z-indexes 的 CSS。而已。所有元素在页面加载时都是可见的，只是滚动使大 Logo 下方出现一个 z-index 较低的元素。

在plain Javascript 中会像 this :

var win = window,
    docEl = document.documentElement,
    $logo = document.getElementById('logo-scroll');

win.onscroll = function(){
   var sTop = (this.pageYOffset || docEl.scrollTop)  - (docEl.clientTop || 0);
   $logo.style.display =  sTop > 100 ? "block":"none" ;
};