淡入，根据滚动淡出

Question

I was recently given a script to change the positioning of a div to fixed after certain scrolling. I've plyaed with it a bit and learnt I can change other stuff besides position, like backgrounds. I've got a logo that changes according to the scrolling, but the change is a bit too abrupt and I'd like to make the change smoother with a fade in and fade out. The problem is, as I've mentioned in other questions I've made, I'm a noob at scripting, although I've been learning a little with people in here helping me to get solutions.

To make clearer what I want, I want a logo that does the same as the logo of this website when scrolling: https://www.planetside2.com/news

This is my HTML:

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

The script I was given with a few modifications of mine:

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

    });

})

The website I want to apply all of this to: http://etrostruewowdesigncomplete.esy.es/phpBB3/viewtopic.php?f=2&t=1

Answer 1

You can just fade one logo into another triggered at a cerain point

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