javascript - menu 隨著scroll高度跳出
本文介绍了javascript - menu 隨著scroll高度跳出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<div id="A" class="menu">
</div>
<div id="B" class="menu">
這個menu先display none
</div>假設我有一個menu
如何當捲軸往下移動時
menu能夠fixed在最上面？
我現在的做法是有兩個menu div
當一開始進入時顯示A menu
當往下滑時顯示B menu
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop()>1)
{
$("#B").fadeIn();
}
else if($(this).scrollTop()<1)
{
$("#B").fadeOut();
}
});
});就是：
https://santatracker.google.c...
進入這個網頁後
往下滑動，上面的menu會出現且fixed
不過我必須要做兩個menu才可以實現這個效果
如何在「同一個」menu就可以做到這個效果呢？？
解决方案
能看出來你給的頁面中的header確實是只有一個並且用了fixed定位，同時是通過修改樣式來做的。
然後選中header可以看到Event listeners中有window的scroll,說明是放在window的滾動事件中做了處理。
修改的樣式有box-shadow、background等樣式，由於使用了CSS变量,所以不太好找頁面修改的具體的值。
所以我只能儘量用找到的樣式來寫一個demo，重點還是一個transition屬性。也許你將背景的改變當成了兩個header的顯示隱藏效果了。
* {
margin: 0;
padding: 0;
}
body {
height: 2000px;
background: skyblue;
}
#header {
height: 50px;
/*transparent爲背景透明*/
background: transparent;
border-bottom: 1px #666 solid;
transition: all .5s;
position: fixed;
width: 100%;
}
#header.show {
background: #30cbec;
border: none;
box-shadow: 0 2px 0 rgba(0, 0, 0, .25), inset 0 5px 6px -3px rgba(0, 0, 0, .4);
}
<body>
<div id="header">
I'm Header
</div>
</body>
$(document).ready(function() {
$(window).scroll(function() {
if($(this).scrollTop() > 1) {
$("#header").addClass("show");
} else if($(this).scrollTop() < 1) {
$("#header").removeClass("show");
}
});
});这篇关于javascript - menu 隨著scroll高度跳出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
