这是一个基于滚动来改变网页内容的好方法
What's a good way to change something on a web page based on scrolling?
我想做的是改变一些元素的css,基于滚动。例如,我有一个div,并希望使它的不透明度为0时,一个网站向下滚动500px,但我想使它与过渡,例如,当网站向下滚动250px,不透明度应为0.5我正在寻找一个好方法,有几个if语句在滚动循环不是那么好,也许有一些库来做到这一点?
当你想要渐变设置与页面的滚动位置相关时,你需要在Javascript中完成这个操作。您可以通过从document.height
中减去window.height
来计算出页面的整个可滚动长度。从那里你可以计算document.scrollTop
的不透明度百分比。试试这个:
$(document).scroll(function() {
var scrollableHeight = $(this).height() - $(window).height();
var opacity = 1 - ($(document).scrollTop() / scrollableHeight);
$('header').css('opacity', opacity);
});
工作示例
这将为您工作。你应该做的是绑定一个滚动事件到你的窗口,并计算no。滚动像素。然后您可以根据这个值计算opacity
,如下所示(这里500是您的500px
限制)
opacity = (1 - scrolledNoOfPixels / 500)
然后修改相关元素的css属性。
var scrolledValue = 0;
$(window).scroll(function (event) {
var scrolled = $(document).scrollTop() - scrolledValue;
console.log("Scrolled pixels : " + scrolled);
$("#mydiv").css('opacity', 1 - scrolled / 500);
});
body {
height: 1200px;
background: red;
opacity: 0.6;
}
#mydiv{
width:300px;
height:1000px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<body>
<div id="mydiv"></div>
</body>
使用一些标准的JavaScript,或者jQuery和数学,这将非常容易做到:-)
使用背景色代替不透明度的例子:
$(document).ready(function(){
$(window).scroll(function(){
var max = 500;
var current = $(window).scrollTop();
var opacity = 1 - (current / max);
$('#box').css('background-color', 'rgba(127, 208, 249, '+opacity+')');
});
});
你可以改变background-color的不透明度。如果你真的想要的话。但这给了你想要的效果。
查看完整示例:http://jsfiddle.net/L23gfL80/1/
使用不透明度,框内的内容也会逐渐消失。
检查不透明度示例:http://jsfiddle.net/w2d8dura/
检查一些CSS视差滚动效果,这就是你要找的,这里有一些有用的网站:
http://keithclark.co.uk/articles/pure-css-parallax-websites/http://davidwalsh.name/parallax你可以在谷歌上做一些研究,甚至在Youtube上也有一些很好的教程。
来自插件站点:
路径点是触发函数的最简单的方法,当你滚动到一个元素。
是jquery插件的链接。
一个元素在20px处的例子
var waypoint = new Waypoint({
element: document.getElementById('px-offset-waypoint'),
handler: function(direction) {
notify('I am 20px from the top of the window')
},
offset: 20
})
- 如何在没有文本区域或文本字段的浏览器中编辑网页内容
- 通过javascript在同一个打开的选项卡中重新加载新的网页内容
- 如何使用Perl访问JavaScript驱动的网页内容
- 重新调整网页内容的大小
- 无需ajax即可实时更改网页内容
- d3.根据数组内容改变各个节点的颜色
- 将网页内容调整在固定大小的 iframe 上
- 需要了解跟踪代码在网页内容中的工作方式
- 在 Java 中读取动态网页内容
- 用于重复获取网页内容的程序
- 如何格式化从javascript加载的网页内容
- 用AJAX响应中的内容替换网页内容
- 在网页上选择一个超链接,并使用CasperJS将生成的网页内容存储在文本文件中
- 整合网页内容页面上的灯箱
- 使用什么技术可以在不刷新网页的情况下更新网页内容?
- 从下拉菜单中过滤网页内容的最简单方法是什么?
- 使用Bootstrap 3正确定位在动画背景之上获取网页内容
- PHP / AJAX:每3秒获取网页内容,直到它改变
- 这是一个基于滚动来改变网页内容的好方法
- 如何改变网页内容,而不删除任何样式/css/图形