个人中心
文章发布
退出
作者热门文章
- iOS/Objective-C 元类和类别
- objective-c - -1001 错误，当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
24
4
我正在尝试将我的导航栏设置为保持固定并在我向下滚动时淡入 0.8 不透明度，并在我向上滚动时返回到他的正常位置和不透明度。
我的 jquery 代码是:
jQuery(document).ready(function(){
var navOffset = jQuery("nav").offset().top;
jQuery(window).scroll(function(){
var scrollPos = jQuery(window).scrollTop();
if(scrollPos > navOffset) {
jQuery("nav").addClass("fixed");
jQuery("nav").fadeTo(1500,0.5);
} else {
jQuery("nav").removeClass("fixed");
jQuery("nav").fadeTo(1500,1);
}
});
});
我的 CSS 代码是:
.fixed {
position:fixed;
top:0;
}
当我向下滚动时它会淡出，但当我向上滚动时它不会恢复到原来的不透明度。我是 jQuery 的新手。
最佳答案
我认为问题在于您在每次触发 scroll 事件时都设置了 fadeTo 函数。因此，当您向下滚动时，您将向动画效果队列添加许多“淡出”调用。当您向上滚动时，所有“淡出”效果(每个效果需要 1.5 秒)必须在第一个“淡入”调用发生之前完成。
您可以通过添加对 jQuery 的 .stop(true) 的调用来解决此问题，这样每个滚动事件都会清除动画队列:
jQuery(document).ready(function() {
var navOffset = jQuery("nav").offset().top;
jQuery(window).scroll(function() {
var scrollPos = jQuery(window).scrollTop();
jQuery("nav").stop(true);
if (scrollPos > navOffset) {
jQuery("nav").addClass("fixed");
jQuery("nav").fadeTo(1500, 0.5);
} else {
jQuery("nav").removeClass("fixed");
jQuery("nav").fadeTo(1500, 1.0);
}
});
});body {
height: 4096px;
padding-top: 32px;
}
nav {
height: 128px;
width: 100%;
border: 1px solid black;
background-color: #00aa00;
}
.fixed {
position: fixed;
top: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>so</title>
<meta charset="UTF-8">
</head>
<body>
<nav></nav>
</body>
</html>请注意，这意味着在用户停止滚动之前，fadeTo 动画不会发生。
关于javascript - 淡入/淡出导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31748265/
24
4
0
我正在尝试剪切和淡出 mp3 文件的最后 4 秒: avconv -i SPEX_pilot_02.mp3 -t 0:0:25 -filter:a fade=t=out:st=21:d=4 prete
我有一个连续的 HTML 元素列表。每个列表项都包含超链接内的图像，如下所示: 当您将鼠标悬停在列表项上时，我本质上想使用 jQuery 淡入包含链接标题的工具提示。因此，当您将
我有一个视频文件和一个音频文件。 我想将它们合并在一起，最终输出的视频将在视频的长度内，并将包含背景中的音频。 我做了: ffmpeg -i output.avi -i bgmusic.mp3 -fi
我有一个生成的超大图表，我将其放入 ScrollView，以便用户可以向右滚动并查看所有值。我想通过淡出 ScrollView 向用户表明右侧还有“更多内容”。通过应用 CAGradientLayer
我目前正在使用此代码来尝试使用具有 .info 类的按钮作为淡入和淡出文本的切换开关。现在动画正在与此代码连续运行。有没有一种方法可以让我单击按钮一次并使文本淡入，而不会在几秒钟后淡出？当您再次单击该
当我的 iPhone 界面旋转时，我想对 UIViewController 的特定 UIView 进行淡入/淡出...就像... - (void)willRotateToInterfaceOrient
所以事情就是这样。我看到这个网站:http://laneandassociates.co/english-mustard-scottish-oats我完全不明白他们是如何做到淡入淡出的。 其淡入淡出效
现在我有这个(只是增加标签的 alpha，中间有小中断): ae.getErrorLabel().setVisible(true); ae.getErr
我在 jQuery 中做了一些简单的 .hover(function() 语句。当我将鼠标悬停在文本上时，我只想要一个 #div.fadeIn，并且在非悬停时淡出。它有效。但这只是如果我发送垃圾邮件悬
我是 jQuery 新手，因此我正在不断学习。 在我创建的网站上，有两个功能似乎相互冲突:第一个功能是当用户开始滚动时网站标题会淡出，第二个功能是在 anchor 之间平滑滚动这一页。第二个脚本使淡出
我使用标题值在单击按钮时显示/隐藏一些 div。第一个按钮将仅显示具有 ab 值的 div，第二个按钮将显示所有 div。一切(有点)都有效，但是当显示所有 div 时，fadeOut/In 会产生令
我试图让一些文本淡出 1000 毫秒，等待 1000 毫秒，将文本更改为数组中的随机条目，然后淡入 1000 毫秒。文本应该在淡出之前不间断地停留 5 秒。 我已经设法更改文本，但我还没有找到如何使其
我收到一条错误消息，如果提交表单并返回错误，则会显示该消息。 表单检查.php jQuery('#error', window.parent.document).html( "There was
我有大约 20 张不同的图像，我想在 4 个框中淡入淡出。我需要它从图像列表中随机选择一个图像并显示它。 框示例 photo1、photo2、photo3、photo4 是它们的名称。它们需要根据其绝
我有一个 ID 为“blog-container”的包含 div，以及其中的一组子 div，其类为“blog-item”。 我想要做的是将“博客容器”中的所有“博客项目”一一淡出，一个接一个，然后以相
我找到并修改了一种创建文本到图像翻转的好方法，在这里:http://jsfiddle.net/pkZAW/12/ $( function() { $("#imglink").hover(
函数检查 session (){ $.ajax({url: "session.php", 成功: 函数(数据){ 如果(数据== 1){ var postFilen = 'msg.php'; $.po
需要一些建议:我想创建一个 fadeIn/fadeOut 脚本，它可以在页面滚动时响应地工作。我想做什么: 滚动时，一旦到达隐藏的 div，它就会淡入。 一旦滚动到达页面顶部，它就会淡出。 任何 fu
当 scrollToTop 超过 1000px 时，我有以下内容应该使 .secondLogo 出现(通过淡入) var secondLogo = $(".secondLogo"); $(window
我有一个音乐脚本，但是当我按下空格又名暂停按钮时，我希望它暂停它已经播放的音乐，但我希望它像 spotify 一样以淡入/淡出的方式播放 这是我到目前为止的代码: var play = true; v
我是一名优秀的程序员,十分优秀！