Question

我还没有找到一个有效的答案。有一个我发现有类似问题，但是按照解决方案似乎没有用。

当页面向下滚动到足够远时，我试图使标题的背景发生变化。它在Tumblr的预览中运行得很好，但是当我进入实时页面时，它无法正常工作。

Here's an image demonstrating what I'm trying to accomplish

这是我的HTML：

<div class="titlor"><a href="/">Don<i>'</i>t Hug Me I<i>'</i>m Scared</a></div>

...我的CSS：

.titlor {
    font: normal normal bold 40px/40px 'Dhmis', cursive;
    height:auto; width:100%;
    background:transparent center/cover;
    border-bottom:5px solid transparent;
    position:fixed;
    top:0; left:0;
    text-transform:uppercase;
    letter-spacing:1.5px;
    text-align:center;
    padding:10px;
    z-index:100;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.titlor a {
    color:white!important;
    -webkit-transition: all 0.2s ease-in-out!important;
    -moz-transition: all 0.2s ease-in-out!important;
    -ms-transition: all 0.2s ease-in-out!important;
    -o-transition: all 0.2s ease-in-out!important;
    transition: all 0.2s ease-in-out!important;
}

.titlor i {
    margin-left:-5px;
    margin-right:7px;
    color:white!important;
}

.titlor i:hover {
    color:white!important;
}

.titlor.active {
    background:#7acdc7 url('http://i.imgur.com/x3l1mP1.png') center/cover;
    border-bottom:5px solid white;
}

...和我的JQuery代码。它位于结束标记的正上方。

<script>
    $(document).ready(function() {
    $(window).on("scroll", function() {
        if($(window).scrollTop() > 25) {
            $(".titlor").addClass("active");
        } else {
            //remove the background property so it comes transparent again (defined in your css)
            $(".titlor").removeClass("active");
        }
    });
});
</script>

请记住，我对JQuery和JS一无所知，我还在学习。我在这里找到了这个代码;我自己没有打字。

感谢您的帮助。：

几乎忘了， here's the blog I'm trying to do this on。

Answer 1

您多次加载jquery，

改变这个：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

对此：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

当您在页面的某个位置使用.live()我认为不在3.1.0

然后在底部删除另一个

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

JQuery在预览中工作，但不在Tumblr上运行

1 个答案: