这是一个基于滚动来改变网页内容的好方法

What's a good way to change something on a web page based on scrolling?

本文关键字：网页内容 改变 方法 滚动 于滚动 一个      更新时间：2023-09-26

我想做的是改变一些元素的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 
})
相关文章：