javascript - 根据滚动淡入淡出

Question

我最近得到了一个脚本，可以在特定滚动后将 div 的定位更改为固定。我已经尝试了一下，了解到我可以改变位置以外的其他东西，比如背景。我有一个根据滚动而变化的 Logo ，但变化有点太突然，我想通过淡入和淡出使变化更平滑。问题是，正如我在我提出的其他问题中提到的那样，我是脚本编写方面的菜鸟，尽管我一直在这里学习一些帮助我获得解决方案的人。

为了更清楚地说明我想要什么，我想要一个在滚动时与该网站的 Logo 相同的 Logo :https://www.planetside2.com/news

这是我的 HTML:

<div id="wrap">
 <div id="page-header">
  <div class="headerbar">
   <li class="logo">
    <a>Logo is here</a>
   </li>
  </div>
 </div>
</div>

给我的脚本做了一些修改:

$(document).ready(function(){

    $(window).on("scroll resize", function(e){

        var elem = $(".headerbar");
        var shadow = $(".headerbar .menu");
        var logo = $(".logo a");

        if ((elem.offset().top - $(window).scrollTop()) <= -73 && elem.css("position") !== "fixed") {
            console.log("not visible");
            elem.css({
                position:"fixed",
                "z-index":"9999",
                top:"-71px"
            });
            shadow.css({
                "box-shadow":"0 15px 20px -3px #000"
            });
            logo.css({
                "background":" url('{T_THEME_PATH}/images/scrolledlogo.png') center no-repeat",
                "width":" 213px",
                left: "-34px",
                top:"-41px"
            });

        } else if (elem.height() >= $(window).scrollTop()) {
            console.log("visible");
            elem.css({
                position:"relative",
                top:"0px"
            });
            shadow.css({
                "box-shadow":"none"
            });
            logo.css({
                "background":" url('{T_THEME_PATH}/images/logo.png') center no-repeat",
                "width":"143px",
                left: "0px",
                top:"-40px"
            });
        }

    });

})

我想将所有这些应用到的网站:http://etrostruewowdesigncomplete.esy.es/phpBB3/viewtopic.php?f=2&t=1

Answer 1

您可以在特定点将一个 Logo 淡入另一个 Logo

演示 http://jsfiddle.net/hpXL4/138/

$(window).scroll(function () {
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = 150;
    // set to whatever you want it to be

    if (y_scroll_pos > scroll_pos_test) {
        $(".apple").fadeIn();
        $(".apple2").fadeOut();
    } else {
        $(".apple2").fadeIn();
        $(".apple").fadeOut();
    }
});