个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
在发布这个问题之前，我搜索了可能的答案，但找不到我需要的答案。
就是说:我有一个包含多个 div 的演示页面，每个 div 可以有不同的高度。我坚持了几个小时的方法是执行以下操作:
当 div 的底部在向下滚动时达到特定的页面顶部偏移阈值时，不透明度应更改为 .4 当向上滚动时 div 再次垂直居中，然后将不透明度设置为 1。
期望的结果是 1 个 div 处于事件状态(100% 不透明度)，垂直居中，所有其他 div 处于非事件状态，但是当您向上/向下滚动足够多时，事件 div 应该变为非事件状态(不透明度 40%)，下一个/之前的 div 应该变为事件状态。
需要注意的是，偏移量应该根据div底部的位置来计算。因为否则滚动时高度较大的 div 可能会变得不活动。从底部位置开始计算应确保整个 div 偏离中心足以变为非事件状态。
检查这个 fiddle : https://jsfiddle.net/4q98yxk2/3/
代码:
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(window).on("load",function() {
$(window).scroll(function() {
$(".fade").each(function() {
console.log($(this).position().top);
});
}).scroll(); //invoke scroll-handler on page-load
});
</script>
</head>
<body>
<div class="content">
<div class="fade">Box 1</div>
<div class="fade">Box 2</div>
<div class="fade biggest">Box 3</div>
<div class="fade">Box 4</div>
<div class="fade blue">Box 5 blue</div>
<div class="fade big">Box 6</div>
<div class="fade">Box 7</div>
<div class="fade">Box 8</div>
<div class="fade big">Box 9</div>
<div class="fade biggest">Box 10</div>
<div class="fade">Box 11</div>
<div class="fade">Box 12</div>
</div>
希望您能提供帮助，因为我对如何实现这一点一无所知。谢谢!
最佳答案
我不太了解 JS，但我想我找到了一些东西。如果有帮助，请检查 fiddle :
https://jsfiddle.net/scorpio777/4q98yxk2/25/
我已经用这个替换了你的 JS:
var fade = $('.fade');
var range = 200;
$(window).on('scroll', function () {
var st = $(this).scrollTop();
fade.each(function () {
var offset = $(this).offset().top;
var height = $(this).outerHeight();
offset = offset + height / 1;
$(this).css({ 'opacity': 1 - (st - offset + range) / range });
});
});
并添加了 CSS:
.content{
margin-top:50px;
}
关于javascript - 滚动 : change opacity (from 0 to 1 and vv) of div when at a specific position on page，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45066085/
25
4
0
我正在 sitepoint 上阅读一篇文章 - http://www.sitepoint.com/how-to-create-mysql-events/关于mysql事件的主题，当你可以安排时我遇到了
我想为用户预订一个特定的时间(开始时间和结束时间)，其他人不能在同一时间预订。例如：John预约了一个月5号7点到8点的时间，我想没有其他人可以在同一时间和日期预订。我想查一下时段，因为如果像John
I want to book a specific time for the user (start hour and end hour ) and no one else can book a
我已经克隆了 linux 内核 git 仓库: git clone git://git.kernel.org/pub/scm/linux/kernel/git/torvalds/linux.git 我
我正在尝试获取下面突出显示的文本“frei ab 01.05.2017”。然而问题是，“section_content iw_right”类在该网站上出现了 19 次。我会执行 find_all 并仅
我尝试找到这个问题，但所有其他问题都与我的问题无关。 我的问题:我有类似 0xFreeFoodU 的东西，我必须获得特定的位置，然后翻转它们或将它们设为 1 或 0。 例如，位置 2、6、10、14、
我正在尝试创建一个登录功能，该功能允许我指定要从中选择数据的表以及要选择的字段。我已设法将表值传递给函数，并从所需的表中选择数据，但我的表有不同的字段。如何在查询中指定它是一个表选择: user_id
我是 Rails 的新手，在获取布局(用作唯一的静态登录页面)来加载我想与之关联的特定样式表时遇到了问题。例如:www.landing.com 加载landing.scss.erb . 作为背景，所有
我不明白为什么这两个示例的行为不同。 HTML 和 CSS 的目的只是简单地水平对齐 div，并让最后一个 div(向右)占据剩余空间(容器的剩余宽度)。 为正确的元素使用特定的 id: #left
我是 postfix 的新手。如何使用限制类或其他方法将特定用户的特定域列入黑名单。 假设我的机器有两个用户 - user1 和 user2。 我想将abc.com 到user1@mydomain 的
当记事本是 .txt 文件的默认程序时，我如何告诉 Windows 在写字板中打开 C:\test\test.txt？ 最佳答案 接受的答案对我不起作用。我不确定这是因为我试图运行的程序，还是因为路径
对于下面的代码示例，我需要检查一个 tr ，type="a"并且有一个带有文本“3”作为 child 的 td ，是否存在: 1 1
var s = '-10px -10px'; var n = '33px'; 我需要一个产生这个结果的正则表达式:'-10px 33px' 类似于:s.replace(???, n) 最佳答案 如果您
一个项目 table: items 有许多分类法 table: taxonomies 使用连接表 item_taxonomies (item_id, taxonomy_id)。 使用分类组搜索项目。
h:panelGrid 表有 2 列。 这是必需的，第一列为整个表格宽度的 30%，第二列为整个表格宽度的 70%。 这种情况有一些配置吗？看起来 columnClasses 属性应用于所有列， 并且
特定阶段仅在特定计算机上卡在队列中 显示队列中的位置:1，但无法连接到代理，即使没有其他作业正在运行且队列为空 所有其他阶段都工作正常 故障阶段在不同的机器上工作正常 代理已在线并已启用 我们所有的代
我正在使用 CakePHP 3.3.10。我需要将 JavaScript 文件添加到特定 View 。 // default.ctp // I need to remove this script
首先，我发现提出问题很困难，欢迎反馈。 我必须制作一个机器学习代理来玩点和盒子。 我还处于早期阶段，但提出了一个问题:如果我让我的机器学习代理(具有特定的实现)与它自身的副本进行对抗来学习和改进它的游
我是开发 iOS 应用程序的新手，英语不是我的母语，所以请原谅我的任何错误和丑陋的代码。 我尝试创建的应用程序应该只在特定的一天显示一张特定的图像(如果日期更改，则更改图像)。因此我实现了一个检查日期
我写了一些函数，并编译成一个dll模块。在我的头文件中如下: #ifndef GET_DATAFEED_FORKDB_H #define GET_DATAFEED_FORKDB_H #include
我是一名优秀的程序员,十分优秀！