在页面滚动上更改元素样式

我想在用户向下滚动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. 它不默认是不可见的，我希望它开始不可见。

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

更多细节，

我想制作类似这个标题的东西，但是，正如你所看到的，有一点你可以看到一半的小徽标，一部分是较大的徽标。 它不会影响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索引的CSS游戏。 而已。 所有元素在页面加载时都是可见的，它只是滚动，使得在大徽标下面出现一个z-index下部元素。

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

Answer 2

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

代码和演示

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

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

 
 
 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. 
  
  
This is the scrollable bar
 
 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; 
 ...  

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