Question

项目我正在努力我想在滚动到新内容时更改顶部div中的标题标题（例如我们谢谢你）。为每个标题使用不同的图像，我如何通过css / html实现这一点？这是页面http://2facced.com/marcecko/

Answer 1

使用jQuery使这更容易，因此您可以捕获滚动事件和滚动位置。请查看如何在CDN中包含jQuery，jQuery的网站上有几个例子。

包含jQuery后，添加以下脚本：

<script language="javascript" type="text/javascript">
$(document).ready(function(){//Anything inside this function runs once the page is finished loading
    $(window).scroll(function() { //jQuery function that adds a handler to run code anytime the user scrolls.
        var changeThreshold1 = 1000;//the first point on the page where we want to trigger a change
        var changeThreshold2 = 2000;//the second
        var changeThreshold3 = 3000;//you ge the idea
        var changeThreshold4 = 4000;
        if($(window).scrollTop() < changeThreshold1){//If the user has not yet scrolled past the first point, or has scrolled back above teh first point
            $('#header').css('background-image','[image source 1]'); //changes the background image of the element with the header ID to the first image source replace [image source 1] with the actual image file name
        }else if($(window).scrollTop() >= changeThreshold1 AND $(window).scrollTop() < changeThreshold2){//if the user has scrolled to the range between points 1 and 2
            $('#header').css('background-image','[image source 2]');
        }else if($(window).scrollTop() >= changeThreshold2 AND $(window).scrollTop() < changeThreshold3){//if the user has scrolled to the range between points 2 and 3
            $('#header').css('background-image','[image source 3]');
        }else if($(window).scrollTop() >= changeThreshold3 AND $(window).scrollTop() < changeThreshold4){//if the user has scrolled to the range between points 3 and 4
            $('#header').css('background-image','[image source 4]');
        }else if($(window).scrollTop() >= changeThreshold4 ){//if the user has scrolled to the range beyond point 4
            $('#header').css('background-image','[image source 5]');
        }else{//a failsafe default incase anything gets screwed up
            $('#header').css('background-image','[image source default]');
        }
    });
});
</script>

编辑 - 评论回复：

您的问题让我相信您对HTML和JavaScript的工作方式存在误解。当用户滚动到元素现在位于其可视区域中的点时，无法触发脚本运行。您需要做的是通过测量或明确设置，知道触发器页面顶部有多少像素。然后检测用户滚动的距离并根据已知测量值进行检查。如果他们已经超过了这一点，那么你就做出了改变。因此，页面上的一个脚本会根据检测用户滚动的时间以及它们的移动程度来完成所有更改。我修改了我的答案，给你一个更好的例子，更全面的笔记。我希望它能帮助你更好地理解。

滚动时替换顶部粘性div上的标题

1 个答案: