根据滚动淡入，淡出

Question

我最近获得了一个脚本，可以在某些滚动后将div的位置更改为fixed。我已经对它进行了一些研究，并了解到我可以改变除了位置之外的其他东西，比如背景。我有一个根据滚动而改变的徽标，但是这个改变有点太突然了，我希望通过淡入淡出使变化更加平滑。问题是，正如我在其他问题中所提到的那样，我是脚本编写的小伙伴，虽然我已经在这里学习了一些帮助我获得解决方案的人。

为了更清楚我想要的东西，我想要一个与滚动时网站徽标相同的徽标：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

您可以将某个徽标淡化为某个点触发的另一个徽标

DEMO 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();
    }
});