動畫scrollTop的固定頭

我使用下面的代碼，但我想它的動畫，這樣的電話號碼滾動起來順手類似的方式，其中在報頭中的電話號碼，該網站做的：http://www.lyonsroofing.com 動畫scrollTop的固定頭

謝謝。

$(window).scroll(function(){ 
 
    $("#theFixed").css("top",Math.max(28,45-$(this).scrollTop())); 
 
});

#theFixed { 
 
\t position:fixed; 
 
\t top:45px; 
 
} 
 

 
.container { 
 
    width:100%; 
 
    height:2000px; 
 
    } 
 

 

 

 
#logoright { 
 
\t width:240px; 
 
\t float:right; \t 
 
\t text-align:right; 
 
} 
 

 
.logorightpad { \t 
 
\t padding: 0; \t 
 
} 
 

 
.social { 
 
\t float:right; 
 
\t padding:0; 
 
\t margin:3px 0 0 0; \t 
 
} 
 

 
.social-left { 
 
\t float:left; \t 
 
}

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 
<div id="logoright"> 
 
<div class="logorightpad"> 
 

 
<div id="theFixed"> 
 
<div class="telephone"> 
 
<h2>555-555-1212</h2> 
 
</div> 
 
<div class="social"> 
 
<div class="social-right"><a target="_blank" href="https://www.facebook.com><i class="fa fa-facebook-square" aria-hidden="true"></i></a> 
 
</div> 
 
</div> 
 
</div> 
 

 
<div class="container"> 
 
    
 
</div>

來源

2017-02-05 Johnny B Good

您可以使用css transition或jquery animate獲得平滑過渡效果。

$(window).scroll(function(){ 
 
    $("#theFixed").css("top",Math.max(28,45-$(this).scrollTop())); 
 
});

#theFixed { 
 
\t position:fixed; 
 
\t top:45px; 
 
\t /* added transition*/ 
 
\t -webkit-transition: top 0.5s; 
 
     transition: top 0.5s; 
 
} 
 

 
.container { 
 
    width:100%; 
 
    height:2000px; 
 
    } 
 

 

 

 
#logoright { 
 
\t width:240px; 
 
\t float:right; \t 
 
\t text-align:right; 
 
} 
 

 
.logorightpad { \t 
 
\t padding: 0; \t 
 
} 
 

 
.social { 
 
\t float:right; 
 
\t padding:0; 
 
\t margin:3px 0 0 0; \t 
 
} 
 

 
.social-left { 
 
\t float:left; \t 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div id="logoright"> 
 
<div class="logorightpad"> 
 

 
<div id="theFixed"> 
 
<div class="telephone"> 
 
<h2>555-555-1212</h2> 
 
</div> 
 
<div class="social"> 
 
<div class="social-right"><a target="_blank" href="https://www.facebook.com><i class="fa fa-facebook-square" aria-hidden="true"></i></a> 
 
</div> 
 
</div> 
 
</div> 
 

 
<div class="container"> 
 
    
 
</div> \t 
 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 

 
</body> 
 
</html>

我只是說transition: top 0.5s;到你的CSS。

來源

2017-02-05 19:10:56 azs06

哇..謝謝你這麼多！ –

稍微更新了答案，以便爲webkit添加供應商前綴以確保它適用於所有支持的瀏覽器。如果此解決方案適合您，請考慮將其標記爲正確答案。 – azs06

使用jQuery動畫：http://api.jquery.com/animate/ 喜歡的東西shoule工作： $（「＃theFixed」）動畫（{ 「頂」，Math.max（28,45 - $（。此）.scrollTop（））}）;

來源

2017-02-05 18:55:33

動畫scrollTop的固定頭

回答

相關問題