Блог

Я получил некоторый код «анимированного липкого заголовка» из онлайн-руководства по jQuery. Все работает нормально, за исключением того, что я хочу изменить изображение логотипа при появлении анимации заголовка. Я пытался отредактировать код, но не могу заставить его работать (моя ошибка!)

HTML выглядит следующим образом:

 <div class="menu" id="fixed">

<div id="logo"><img id="logo-img" src="svg/logo-200-red-border.svg" width="120" height="120"></div>

<ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Location</a></li>
    <li><a href="">Contact</a></li>
</ul>


</div> <!-- .menu -->
  

jQuery, который я использую, заключается в следующем:

 ;(function($){
'use strict';

 var defaults = {
    topOffset: 400, //px - offset to switch of fixed position
    hideDuration: 300, //ms
    stickyClass: 'is-fixed'
};

$.fn.stickyPanel = function(options){
    if(this.length == 0) return this; // returns the current jQuery object

    var self = this,
        settings,
        isFixed = false, //state of panel
        stickyClass,
        animation = {
            normal: self.css('animationDuration'), //show duration
            reverse: '', //hide duration
            getStyle: function (type) {
                return {
                    animationDirection: type,
                    animationDuration: this[type]
                };
            }
        };

    // Init carousel
    function init(){
        settings = $.extend({}, defaults, options);
        animation.reverse = settings.hideDuration   'ms';
        stickyClass = settings.stickyClass;
        $(window).on('scroll', onScroll).trigger('scroll');

    }

    // On scroll
    function onScroll() {
        if ( window.pageYOffset > settings.topOffset){
            if (!isFixed){
                isFixed = true;
                self.addClass(stickyClass)
                    .css(animation.getStyle('normal'));
                self.attr( "src", "svg/logo-rs-layer-200-w.svg" );

            }
        } else {
            if (isFixed){
                isFixed = false;

                self.removeClass(stickyClass)
                    .each(function (index, e) {
                        // restart animation
                        // https://css-tricks.com/restart-css-animation/
                        void e.offsetWidth;
                    })
                    .addClass(stickyClass)
                    .css(animation.getStyle('reverse'));


                setTimeout(function () {
                    self.removeClass(stickyClass);
                }, settings.hideDuration);
            }
        }
    }


    init();
    return this;


}
})(jQuery);


//run
$(function () {
    $('#fixed').stickyPanel();
});
  

Итак, мой вопрос — как мне отредактировать код jQuery obove, чтобы изменить текущее изображение «логотипа» (на другое изображение ПРИ АНИМАЦИИ ЗАГОЛОВКА?

По своему невежеству я попробовал добавить:

 self.attr( "src", "svg/logo-rs-layer-200-w.svg" );
  

к jQuery:

 // On scroll
    function onScroll() {
        if ( window.pageYOffset > settings.topOffset){
            if (!isFixed){
                isFixed = true;
                self.addClass(stickyClass)
                    .css(animation.getStyle('normal'));
                self.attr( "src", "svg/logo-rs-layer-200-w.svg" );

            }
        } else {
  

… но (сюрприз) безуспешно!

Любая помощь была бы высоко оценена.

Зачем вам вообще нужен тег изображения? Можете ли вы просто иметь 2 css-класса, каждый с разным фоновым изображением, и просто переключать классы в вашем коде jquery?

css

 .normal-logo {
  height: 120px;
  width: 120px;
  background-image: url('svg/logo-200-red-border.svg');
}


.sticky-logo {
  background-image: url('svg/logo-rs-layer-200-w.svg');
}
  

jquery

просто удалите это:

 self.attr( "src", "svg/logo-rs-layer-200-w.svg" );
  

HTML

 <div id="logo" class="normal-logo"></div>