I.自身が自分たちのニーズを設定します
- マウスホイールの動きは、字幕の適切な位置に表示されます
- マウスは、マウスの時にスライド消えたときに衰退が表示されます。
- 効果をフェードアウト
II。コード
<!--小标题-->
<style>
.my_catalogue_div {
line-height: 50px;
position: fixed;
height: 50px;
width: 100%;
background: #e0d9d9;
top: 0;
z-index: 999999;;
}
.my_catalogue {
margin-right: 10px;
float: left;
display: block;
position: initial;
}
.my_catalogue a:link, .my_catalogue a:visited, .my_catalogue a {
display: inline-block;
vertical-align: middle;
font-size: 15px;
padding: 0;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
color: black;
text-decoration: none;
}
.my_catalogue a:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #222;
transform: scaleY(0);
transform-origin: 50% 0;
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}
.my_catalogue a:hover {
color: white;
box-shadow: none;
padding: 0;
}
.my_catalogue a:hover::before {
transform: scaleY(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
@keyframes opacity_0_to_1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.my_catalogue_div_opacity_0_to_1 {
animation-name: opacity_0_to_1;
animation-duration: 2s;
animation-fill-mode: forwards;
}
.home_page {
right: 0;
margin: 0;
position: absolute;
}
</style>
<body>
<div class="my_catalogue_div" style="display: none">
<span class='my_catalogue'><a href="https://www.cnblogs.com/pythonywy/p/10911404.html" target="_self">算法题</a></span>
<span class='my_catalogue'><a href="https://www.cnblogs.com/pythonywy/p/10862019.html" target="_self">Python</a></span>
<span class='my_catalogue'><a href="https://www.cnblogs.com/pythonywy/p/10862096.html" target="_self">前端</a></span>
<span class='my_catalogue'><a href="https://www.cnblogs.com/pythonywy/p/11568799.html" target="_self">Vue</a></span>
<span class='my_catalogue'><a href="https://www.cnblogs.com/pythonywy/p/10862343.html" target="_self">爬虫</a></span>
<span class='my_catalogue'><a href="https://www.cnblogs.com/pythonywy/p/11269267.html" target="_self">数据库</a></span>
<span class='my_catalogue'><a href="https://www.cnblogs.com/pythonywy/p/11379228.html" target="_self">Django</a></span>
<span class='my_catalogue'><a href="https://www.cnblogs.com/pythonywy/p/11568936.html" target="_self">DRF框架</a></span>
<span class='my_catalogue'><a href="https://www.cnblogs.com/pythonywy/p/11621158.html" target="_self">Flask</a></span>
<span class='my_catalogue'><a href="https://www.cnblogs.com/pythonywy/p/11621165.html" target="_self">微信小程序</a></span>
<span class='my_catalogue home_page '><a href="https://www.cnblogs.com/pythonywy/" target="_self">首页</a></span>
</div>
</body>
<script>
var scrollFunc = function (e) {
var my_catalogue_div = document.querySelector('.my_catalogue_div');
var scroll_y = window.scrollY //这里调整距离
if (window.scrollY > 200) {
//改类名形式是css3动画可以重复出现
e.deltaY > 0 ? my_catalogue_div.className = 'my_catalogue_div my_catalogue_div_opacity_0_to_1' : my_catalogue_div.className = 'my_catalogue_div'
e.deltaY > 0 ? my_catalogue_div.style.display = 'block' : my_catalogue_div.style.display = 'none'
}
};
/*注册事件这个可以省略但是爬兼容问题就留着*/
if (document.addEventListener) {
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}//W3C
window.onmousewheel = document.onmousewheel = scrollFunc;//IE/Opera/Chrome/Safari
//这里可以直接window.onmousewheel =scrollFunc
</script>
III。影響ショー
