在页面滚动上更改元素样式 [英] Change Element Style On Page Scroll

问题描述

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

I want to change the visibility of an element after the user scrolls down 100px.

我已经有一些代码，

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. 它不默认为不可见，我希望它开始不可见。

1. It doesn't default to be invisible, I want it so it starts invisible.

更多详情，

我想做一个类似这个标题，但是，正如你所看到的，有一个点，你看到小徽标的一半和较大徽标的一个PART。它不会影响techcrunch很多，因为标题很小，但在我的网站，它是。我已经做了一切，我只需要在 display：none 中启动，并在100px后显示。

I want to make something like this header, but, as you can see, there's a certain point where you see half of the small logo, and a PART of the bigger one. It doesn't affect techcrunch much as the header is small, but on my site, it does. I have made everything, I just need to start it in display:none, and become visible after 100px.

推荐答案

使用： display：block; 和 display：none;

将此添加到您的CSS：

Add this to your CSS:

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

jQ：

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

BTW：在TC页面上只是一个 CSS 使用z-index播放。而已。所有元素在网页加载时都是可见的，它只是滚动，使得在大标志下面出现一个z-index低元素。

BTW: on TC page it's just a CSS play with z-indexes. nothing more. all elements are visible at page load, it's just the scroll that makes appear a z-index lower element beneath the big logo.

在 plain Javascript 会像 此 ：

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" ;
};

这篇关于在页面滚动上更改元素样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！