gpt4 book ai didi

javascript - 请在向下滚动时隐藏固定标题,在向上滚动时显示并悬停版本 2

转载 作者:太空宇宙 更新时间:2023-11-03 21:28:12 25 4
gpt4 key购买 nike

我知道之前有人在这里问过这个问题,但我不太喜欢它的脚本编写方式,而且运行时看起来不稳定。

我想要以下内容:

  • 在向下滚动时使用淡出隐藏标题
  • 使用淡入淡出在向上滚动时显示标题
  • 悬停时显示标题

我决定不展示其他示例中的一些 js,因为人们打算处理这些,但效果不佳。

希望有人能提供帮助,这对编码人员来说一定很容易。

--> FIDDLE

HTML:

<header>
<nav>
<div class="mob-nav">
<div class="nav-toggle"><i class="nav-icon"></i></div>
</div>
<ul class="left-nav">
<li class="home"><a href="#">Pixelation</a></li>
</ul>
<ul class="right-nav">
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>

最佳答案

像这样在 jQuery 中使用 scroll 函数 -

$(document).ready(function(){
var iScrollPos = 0;
$(window).scroll(function () {
var iCurScrollPos = $(this).scrollTop();
if (iCurScrollPos > iScrollPos) {
$('header').fadeOut(500);
} else {
$('header').fadeIn(500);
}
iScrollPos = iCurScrollPos;
});
});
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box; /* width and height value includes content, padding and border not the margin */
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0,0,0,0); /* remove highlight on touch devices */
-webkit-tap-highlight-color: transparent;
}

html {
position: relative;
min-height: 100%; /* sticky footer */
overflow-y: scroll;
height: 2500px;
}

body {
font-family: "Helvetica Neue", helvetica, arial, sans-serif;
font-weight: normal;
font-size: 18px;
line-height: 1.4;
letter-spacing: 1px;
color: #000;
}

body, input, textarea, select, button {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

header {
position: fixed;
width: 100%;
top: 0;
left: 0;
margin: 0;
padding: 0;
z-index: 9999;
background-color: #eee;
}

.mob-nav {
display: none; /* hide mobile nav */
}

nav ul.left-nav {
float: left;
}

nav ul.right-nav {
float: right;
}

nav {
position: relative;
padding: 0 5px;
}

nav ul {
list-style: none;
font-size: 0; /* remove default spacing */
}

nav li {
display: inline-block;
}

nav a {
display: block;
font-size: 18px;
font-weight: normal;
text-transform: uppercase;
text-align: center;
text-decoration: none;
background-color: transparent;
padding: 0 10px;
line-height: 44px;
}

nav a:link,
nav a:visited {
color: #111;
text-decoration: none;
}

nav a:hover,
nav a:active {
color: #999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav>
<div class="mob-nav">
<div class="nav-toggle"><i class="nav-icon"></i></div>
</div>
<ul class="left-nav">
<li class="home"><a href="#">Pixelation</a></li>
</ul>
<ul class="right-nav">
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>

关于javascript - 请在向下滚动时隐藏固定标题,在向上滚动时显示并悬停版本 2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31290424/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com