Question

我在找到如何做到这一点时遇到了一些麻烦，但让我解释一下。我正在构建一个网页，我在顶部有一个固定的标题，但我想根据你向下滚动页面的程度加载不同的内容。理想情况下，我想将图片和文本加载到标题的预设区域。所以也许像条件CSS或什么能让我这样的效果。这里有没有人有任何想法???到目前为止我有这个：

var titles = [ '选1'引用这里“'， '选择2'引用这里“'， '选择3'引用这里“'， '选4'引用这里“'， '选择5“引用这里”'， “” ];

$（窗口）.scroll（函数（）{ var pos = $（this）.scrollTop（）;

if(pos < 1025) {
    $('.title').slideUp().text(titles[0]);
}
if(pos > 1026) {
    $('.title').slideDown();
}
if(pos > 2000) {
    $('.title').text(titles[0]);
}
if(pos > 2250) {
    $('.title').text(titles[1]);
}
if(pos > 3575) {
    $('.title').text(titles[2]);
}
if(pos > 4800) {
    $('.title').text(titles[3]);
}
if(pos > 6000) {
    $('.title').text(titles[4]);
}
if(pos > 8000) {

Answer 1

您可以修改您的第一个示例代码

if(pos < 200)
{
    $('.top').slideUp();
}
if(pos > 200)
{
    $('.top').slideDown().text(titles[0]);
    $('.top').css("background-image", "");
}
if(pos > 700) 
{
    $('.top').css("background-image", "url('http://www.w3schools.com/images/w3javascript.gif')");
    $('.top').text(titles[1]);
}

Answer 2

经过一些谷歌搜索和一般的混乱后，我想出了this：

$("#body").scroll( function() {
var divtop =  $("#largebody").offset().top;
if ( 1 > divtop)
    $("#header").css("background-image", "url('http://www.w3schools.com/images/w3javascript.gif')");
else
    $("#header").css("background-image", "");
});

似乎工作;）。一些说明：

offset（）。top获取浏览器屏幕顶部与相关div之间的距离。所以你想要你的改变，如果它等于0.我取值为1，因为它会提前交换而不是改变你的内容＆＃34;离开＆＃34;浏览器的顶部。

我删除了我的旧答案，因为这个更好

Answer 3

使用wow.js如何使用animate.css

也非常有用

http://mynameismatthieu.com/WOW/

http://daneden.github.io/animate.css/

根据页面位置加载CSS

3 个答案: