Question

我从在线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代码以将当前的“徽标”图像（作为标题动画更改为另一图像？

由于无知，我尝试添加：

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 {

...但是（惊奇）没有成功！

任何帮助将不胜感激。

Answer 1

您为什么需要图像标签？您能否仅拥有两个具有不同背景图片的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>

滚动上的jQuery动画粘滞头-交换图像问题

1 个答案:

css

jquery

html