Question

我有一个简单的问题（我希望）。我的网站顶部有一个粘性导航栏。我所要做的就是交换标题图像，所以当你在页面顶部时它是完整的图像，但是当你开始滚动它时会切换到另一个有一点淡入淡出过渡的图像。

感觉像这样的东西应该有效，但事实并非如此。我不是程序员，所以如果这是愚蠢的我很抱歉，我感谢任何帮助：

<script language="javascript" type="text/javascript">
$(function(){
    $(window).scroll(function(){
    if($(this).scrollTop() > 100) {
        $('.headerimg').fadeOut('slow');
        $('.headerimg')
            .css({'background-image: url(PATH TO SMALL LOGO)'})
    }
    if($(this).scrollTop() < 100) {
        $('.headerimg')
            .css({'background-image: url(PATH TO FULL LOGO)'})
    }
    });
});
</script>

然后在主HTML中我只是通过一个简单的div拉入图像

<div class="headerimg"></div>

Answer 1

好的，首先，你的代码中有一些错误，所以即使你做得对，它也不会起作用：

{'background-image: url(PATH TO SMALL LOGO)'}

应该是：

{'background-image': 'url(PATH TO SMALL LOGO)'}

因为您正在将对象传递给jQuery css函数。此外，您可能希望添加固定属性以使标题保持在顶部。您要实现的目标称为粘性标题，您可以在网上找到大量示例。我用一个最小的代码示例制作了一个小巧的小提琴，但是可以（应该）进行改进以获得更好的性能和跨浏览器：

http://jsfiddle.net/tomsarduy/38hun91z/

注意：您可以在浏览器控制台中看到问题：

Windows（Ctrl + Shift + J）
Mac（Cm + Shift + i）

使用JQuery在滚动上交换标题图像

1 个答案: