向上滚动页面和打开菜单时替换图像

Question

我在他们的网站上发现了一个非常好的 CodyHouse 弹出菜单。作为一个 jQuery 新手，我面临的问题是我似乎无法弄清楚如何在...

时替换我的徽标

用户正在向上滚动
使用汉堡菜单打开菜单

这是 CodyHouse 提供的代码，我目前正在使用...

jQuery(document).ready(function($){
//if you change this breakpoint in the style.css file (or _layout.scss if you use SASS), don't forget to update this value as well
var MQL = 1170;

//primary navigation slide-in effect
if($(window).width() > MQL) {
    var headerHeight = $('.cd-header').height();
    $(window).on('scroll',
    {
        previousTop: 0
    }, 
    function () {
        var currentTop = $(window).scrollTop();
        //check if user is scrolling up
        if (currentTop < this.previousTop ) {
            //if scrolling up...
            if (currentTop > 0 && $('.cd-header').hasClass('is-fixed')) {
                $('.cd-header').addClass('is-visible');
            } else {
                $('.cd-header').removeClass('is-visible is-fixed');
            }
        } else {
            //if scrolling down...
            $('.cd-header').removeClass('is-visible');
            if( currentTop > headerHeight && !$('.cd-header').hasClass('is-fixed')) $('.cd-header').addClass('is-fixed');
        }
        this.previousTop = currentTop;
    });
}

//open/close primary navigation
$('.cd-primary-nav-trigger').on('click', function(){
    $('.cd-menu-icon').toggleClass('is-clicked'); 
    $('.cd-header').toggleClass('menu-is-open');

    //in firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden
    if( $('.cd-primary-nav').hasClass('is-visible') ) {
        $('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
            $('body').removeClass('overflow-hidden');
        });
    } else {
        $('.cd-primary-nav').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
            $('body').addClass('overflow-hidden');
        }); 
    }
}); });

HTML 是...

<div class="cd-header">
    <div class="cd-logo"><a href="<?php echo get_site_url(); ?>"><img src="/wp-content/uploads/2017/09/Wunderful_Designs_Logo-_-Print_300dpi-_-Royal_Blue_Version.svg" width="250" height="auto"/></a></div>

    <nav>
        <ul class="cd-secondary-nav">
            <li><a href="tel:+448451390151">0845 139 0151</a></li>
            <li><a href="mailto:hello@wunderful.co.uk">hello@wunderful.co.uk</a></li>
        </ul>
    </nav> <!-- cd-nav -->


    <a class="cd-primary-nav-trigger" href="#0">
        <span class="cd-menu-text">Menu</span><span class="cd-menu-icon"></span>
    </a> <!-- cd-primary-nav-trigger -->
</div>

<nav>
    <ul class="cd-primary-nav">
        <li class="cd-label">About us</li>

        <li><a href="#0">The team</a></li>
        <li><a href="#0">Our services</a></li>
        <li><a href="#0">Our projects</a></li>

        <li class="cd-label">Work with us</li>

        <li><a href="#0">Start a project</a></li>
        <li><a href="#0">Join In</a></li>
        <li><a href="#0">Create an account</a></li>

        <li class="cd-label">Follow us</li>

        <li class="cd-social cd-facebook"><a href="#0">Facebook</a></li>
        <li class="cd-social cd-instagram"><a href="#0">Instagram</a></li>
        <li class="cd-social cd-dribbble"><a href="#0">Dribbble</a></li>
        <li class="cd-social cd-twitter"><a href="#0">Twitter</a></li>
    </ul>
</nav>
<header>
    <div class="block">
        <div class="two-column">
            <div class="column home-intro">
                <div class="block">         
                    <h1>This is Wunderful</h1>
                    <p>My web studio delivers minimalist yet enticing websites that focus on user experience and converting sales.</p>
                    <p>I also support website owners post launch, revising tactics and improving results.</p>
                    <p class="signoff">- Oliver Martin</p>
                    <a href="#"><button class="two-tone">LET'S TALK! <img src="/wp-content/uploads/2017/09/wave.svg" width="30px" height="auto" /></button></a>
                    <p style="margin-left: 15px;"><img src="/wp-content/themes/wunderful/assets/images/rounded-arrow.svg" width="25px" height="auto"> <small><a href="#">VIEW MY PROJECTS</a></small></p>
                </div>
            </div>
            <div class="column">
                <img src="/wp-content/themes/wunderful/assets/images/project-presentation" alt="Lion Windows - Website Project" width="100%" height="auto">
            </div>
        </div>
    </div>
</header>

所以基本上我想在浏览器 window 向上滚动和菜单按钮被触发时用我的徽标的白色版本替换 .cd-logo img 的 src。当用户向下滚动和关闭菜单时，我需要图像返回蓝色版本。

请帮忙，我想不通。我已经试了几个小时了:(

奥利弗

Answer 1

这就是答案

        var iScrollPos = 0;
    jQuery(window).scroll(function () {
        var iCurScrollPos = jQuery(this).scrollTop();
        if (iCurScrollPos > iScrollPos) {
            //Scrolling Down
           jQuery('#masthead.active .custom-logo-link img').attr('src' , 'http://127.0.0.1/wordpress/wp-content/uploads/2017/09/mymain_logo.png'); 

        }else {

           //Scrolling Up
           jQuery('#masthead.active .custom-logo-link img').attr('src' , 'http://127.0.0.1/wordpress/wp-content/uploads/2017/09/mywhite_logo.png'); 
        }

        iScrollPos = iCurScrollPos;

    });

Answer 2

对于您的 html 模型，这是 jquery 代码的样子，您只需将 src 属性中的文本更改为 link您要切换到的图像。

 var iScrollPos = 0;
jQuery(window).scroll(function () {
    var iCurScrollPos = jQuery(this).scrollTop();
    if (iCurScrollPos > iScrollPos) {
        //Scrolling Down
       jQuery('.cd-logo img').attr('src' , ' YOUR IMG URL TO CHANGE TO WHEN SCROLLING DOWN '); 

    }else {

       //Scrolling Up
       jQuery('.cd-logo img').attr('src' , ' YOUR IMG URL TO CHANGE TO WHEN SCROLLING DOWN '); 
    }

    iScrollPos = iCurScrollPos;

});

向上滚动页面和打开菜单时替换图像

Replace image when scrolling up the page and when opening menu

jquery

replace

image

scrolltop