Javascript 更改页面滚动上的元素样式

Change Element Style On Page Scroll

提问by Namanyay Goel

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

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

I have some code already,

我已经有一些代码了

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.

JSFiddle。

The code has two problems.

代码有两个问题。

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

2. It doesn't repeat, when the user scrolls back up, it doesn't go back being invisible.

1. 它不是默认为不可见的，我想要它所以它开始不可见。

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

More details,

更多细节，

I want to make something like thisheader, but, as you can see, there's a certain point where you see halfof 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.

我想做类似这个标题的东西，但是，正如你所看到的，在某个点你会看到小标志的一半，和大标志的一部分。它不会对 techcrunch 产生太大影响，因为标题很小，但在我的网站上，它确实如此。我已经做了一切，我只需要在display:none.

回答by Roko C. Buljan

Use: display:block;and display:none;

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

jsFiddle DEMO

jsFiddle 演示

Add this to your CSS:

将此添加到您的 CSS：

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

jQ:

简问：

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

BTW: on TC page it's just a CSSplay 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.

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

In plainJavascriptwould be like this:

在普通的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" ;
};

回答by Sangram Nandkhile

Well the question has already been answered. just adding a better example which might be useful for others and it's exactly what op wants.

那么问题已经得到了回答。只是添加一个更好的例子，它可能对其他人有用，这正是 op 想要的。

code and demo

代码和演示

Edited: Added actual code from original source.

编辑：从原始来源添加了实际代码。

jQuery:

jQuery：

// This function will be executed when the user scrolls the page.
$(window).scroll(function(e) {
    // Get the position of the location where the scroller starts.
    var scroller_anchor = $(".scroller_anchor").offset().top;

    // Check if the user has scrolled and the current position is after the scroller start location and if its not already fixed at the top 
    if ($(this).scrollTop() >= scroller_anchor && $('.scroller').css('position') != 'fixed') 
    {    // Change the CSS of the scroller to hilight it and fix it at the top of the screen.
        $('.scroller').css({
            'background': '#CCC',
            'border': '1px solid #000',
            'position': 'fixed',
            'top': '0px'
        });
        // Changing the height of the scroller anchor to that of scroller so that there is no change in the overall height of the page.
        $('.scroller_anchor').css('height', '50px');
    } 
    else if ($(this).scrollTop() < scroller_anchor && $('.scroller').css('position') != 'relative') 
    {    // If the user has scrolled back to the location above the scroller anchor place it back into the content.

        // Change the height of the scroller anchor to 0 and now we will be adding the scroller back to the content.
        $('.scroller_anchor').css('height', '0px');

        // Change the CSS and put it back to its original position.
        $('.scroller').css({
            'background': '#FFF',
            'border': '1px solid #CCC',
            'position': 'relative'
        });
    }
});

HTML

HTML

<div class="container">
    <div class="test_content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum metus nec neque convallis id interdum nibh aliquet. Nulla eget varius diam. Ut ut dolor dolor. Mauris vehicula sodales mi quis euismod. In sem metus, volutpat nec fringilla sed, fermentum ac turpis. Cras aliquam venenatis rutrum. Donec pharetra ante sit amet justo pellentesque nec consequat ante elementum. Ut imperdiet iaculis tortor, id pretium urna pharetra sit amet. Aenean pharetra nunc risus, ac scelerisque urna. Morbi dictum egestas augue, in euismod metus commodo ac. Duis nisl ante, consequat et tincidunt id, eleifend eu ante. Integer lectus velit, tempus eu feugiat et, adipiscing ut mauris.
    </div>

    <!-- This div is used to indicate the original position of the scrollable fixed div. -->
    <div class="scroller_anchor"></div>

    <!-- This div will be displayed as fixed bar at the top of the page, when user scrolls -->
    <div class="scroller">This is the scrollable bar</div>

    <div class="test_content">
        Quisque sollicitudin elit vitae diam consequat accumsan. Suspendisse potenti. Donec dapibus tortor at justo eleifend at pellentesque leo lobortis. Etiam ultrices leo et nulla iaculis eu facilisis augue fermentum. Pellentesque eu leo purus. Vestibulum bibendum, metus at bibendum blandit, lacus neque porttitor diam, id facilisis lectus mauris et leo. Donec adipiscing interdum lacus sed condimentum. In auctor sollicitudin orci, ac interdum risus aliquet ullamcorper. Curabitur mollis accumsan vulputate. Etiam adipiscing diam nec dui posuere ut tincidunt felis tristique. Vestibulum neque enim, placerat sed placerat commodo, consectetur ac mauris. Sed ultrices pretium nibh, a blandit libero imperdiet pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
    </div>
    ...
</div>

CSS:

CSS：

.container{font-size:14px; margin:0 auto; width:960px}
.test_content{margin:10px 0;}
.scroller_anchor{height:0px; margin:0; padding:0;}
.scroller{background:#FFF; border:1px solid #CCC; margin:0 0 10px; z-index:100; height:50px; font-size:18px; font-weight:bold; text-align:center; width:960px;}