粘头向下滑动效果

$(window).scroll(function(){ 
     var sticky = $('.top-menu'), 
     scroll = $(window).scrollTop(); 

     if (scroll >= 200){ 
      sticky.addClass('fixed'); 
     }else{ 
      sticky.removeClass('fixed'); 
     } 
    });

固定CSS粘头向下滑动效果

.fixed{ 
    position: fixed; 
    background: red; 
    z-index: 1; 
}

它工作正常，但我想我能做到这一点“的顶部开始生效滑下去”？

谢谢！

来源

2014-10-09 Roberto

你能请张贴相关的HTML吗？ – Jinandra 2014-10-09 19:58:08

我倒没到CSS的东西，但我依然想这可能工作：

 if (scroll >= 200){ 
      sticky.slideDown(); 
      sticky.addClass('fixed'); 
     }else{ 

      sticky.slideUp(); 
      sticky.removeClass('fixed'); 
     }

来源

2014-10-09 19:51:13 Jinandra

它不工作:( – Roberto 2014-10-09 19:54:18

你应该看看CSS过渡和转换属性。

转换将控制对象动画的速度。
变换将控制对象的变换。（即从0-100px的高度）

学习CSS3的一个很好的资源是here，你应该只是贯穿教程。

来源

2014-10-09 20:03:42 Adjit

对于顺利滑下动画，你可以尝试以下操作：
JS代码：

$(window).scroll(function(){ 
     var sticky = $('.top-menu'), 
     scroll = $(window).scrollTop(); 
     if (scroll >= 200){ 
      sticky.addClass('fixed'); 
      sticky.slideDown(1000); 
     }else{ 
      sticky.removeClass('fixed'); 
      sticky.removeAttr("style"); //slideDown adds the style="block" which needs to be removed so that next time slideDown will work 
     } 
    });

CSS代码：

.fixed{ 
    position: fixed; 
    background: red; 
    z-index: 1; 
    display:none; 
}

这里的逻辑是，在200px滚动后添加“固定”类。此时sticky将通过添加的CSS类display:none。然后将其向下滑动以使其可见。如果用户向上滚动并移动到200px以下，则通过slideDown()函数删除fixed类并删除style属性添加到sticky。希望这会有所帮助。我想它和它完美的像www.walmart.com

来源

2015-03-10 15:39:32 vijayP

你可以尝试添加这样的代码工作，所以你不必指定像素的高度：

var sticky = document.querySelector('.sticky'); 
var origOffsetY = sticky.offsetTop; 

function onScroll(e) { 
    window.scrollY >= origOffsetY ? sticky.classList.add('fixed') : 
            sticky.classList.remove('fixed'); 
} 

document.addEventListener('scroll', onScroll);

来源

2016-06-06 04:03:28

粘头向下滑动效果

回答

相关问题