平滑滚动效果>高度（视差效果）

我正在寻找视差效果。像这样scroll effect。平滑滚动效果>高度（视差效果）

我得到的是这样的

HTML

<nav class="menu"> 
    <ul> 
     <li><a href="#">link1</a></li> 
     <li><a href="#">link2</a></li> 
     <li><a href="#">link3</a></li> 
    </ul> 
</nav>

jQuery的

$(window).bind('scroll', function() { 
     if ($(window).scrollTop() > 80) { 
      $('.menu').addClass('fixed'); 
     } else { 
      $('.menu').removeClass('fixed'); 
     } 
    });

我希望有一个更流畅的效果，当我> 80px，像滚动效果提到。

来源

2016-12-14 Homme

旁注：在jQuery 3.0，.bind（）已被弃用。它被替换为.on（）方法 – iHasCodeForU

即时通讯使用查询 - 1.12.4，但最好是升级？ – Homme

@Homme不要升级。他们中的许多人不工作。 –

-1

我做了一个类似的原型使用CSS转换和jQuery更好的平滑效果。请检查一下。 CSS转换由GPU执行，而jQuery转换使用CPU和数学计算。所以肯定会显得呆滞。

此外，我已经使用了相同的jQuery版本（或多或少），所以你不需要搞乱版本。 :)

$(function() { 
 
    $(window).scroll(function() { 
 
    if ($(window).scrollTop() > 20) 
 
     $(".scrolled").addClass("show"); 
 
    else 
 
     $(".scrolled").removeClass("show"); 
 
    }); 
 
});

* {margin: 0; padding: 0; list-style: none; line-height: 1;} 
 

 
body {font-family: 'Segoe UI';} 
 

 
header {line-height: 5; text-align: center; -webkit-transition: all 0.5s linear; -moz-transition: all 0.25s linear; -ms-transition: all 0.25s linear; -o-transition: all 0.25s linear; transition: all 0.25s linear;} 
 
header.scrolled {line-height: 3; border-bottom: 2px solid #ccc; background-color: #fff; height: 0; overflow: hidden; position: fixed; top: 0; left: 0; right: 0; z-index: 999;} 
 
header.scrolled.show {height: 3em;} 
 

 
.first {background-color: #ccf; position: relative; top: 0; left: 0; right: 0; height: 100%; margin-bottom: 1300px; z-index: 1;}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<header class="scrolled"> 
 
    Scrolled Header 
 
</header> 
 
<div class="first"> 
 
    <header class="normal"> 
 
    Normal Header 
 
    </header> 
 
</div>

来源

2016-12-14 11:21:26

任何理由，为什么这是downvoted？ –

@kumar我发现它很有用，谢谢 – Homme

@Homme欢迎您。叫我** Praveen **。 –

平滑滚动效果>高度（视差效果）

回答

相关问题