Question

我目前正在考虑在本网站的标题导航部分创建两个单独的徽标。

在滚动徽标之前的当前导航对我来说是完美的。滚动的固定导航也是完美的，除了徽标将保持不变。

我有第二个相反颜色的徽标与白色背景相匹配，我面临的问题是将图像从第一个切换到第二个时使用的方法。

我最初的方法可能是使用css，但就目前的情况而言，我是如何解决这个问题，导航样式的文本很好，它只是任何一个关于如何将图像切换到我计划放置的第二个图像的想法。

如果有人有一个粗略的想法来帮助我，我会非常感谢并把它带到船上。

网址：http://94.23.211.70/~cairngorm/

Answer 1

像http://www.w3schools.com/jsref/event_onscroll.asp

这样的东西

<script type="text/javascript">
    window.onscroll = function() {changeSource()};
    function changeSource() {
     if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
       $('.css_class_name').attr('src','new_image.png');
     } esle{
       $('.css_class_name').attr('src','old_image.png');
    } 
  }
</script>

这也是你的一般。你可以在这一点自定义它在210行自定义

    customise the function //Sticky Menu
               var sticky_menu = function(){
    if( jQuery('.fly-header-site.fly-sticky-header-on').length > 0) {
        var header_height = jQuery('.fly-header-site').outerHeight(),
            sticky_open = header_height * 2;
        jQuery(window).on('scroll', function () {
            if (jQuery(window).scrollTop() > header_height + 5) {
                jQuery('.fly-header-site').addClass('sticky-menu').css('top', -header_height);
            } else {
                jQuery('.fly-header-site').removeClass('sticky-menu').css('top', 0);
            }

            if (jQuery(window).scrollTop() > sticky_open) {
                jQuery('.fly-header-site.sticky-menu').addClass('sticky-open')
            } else {
                jQuery('.fly-header-site.sticky-menu').removeClass('sticky-open')
                jQuery('.fly-wrap-logo').src('http://www.vectortemplates.com/raster/superman-logo-012a.png')
            }
        });
    }
};

Answer 2

也许您应该考虑使用JavaScript。 setInterval()时hover可以使用&，以便在几秒钟后更改。或者即使你None它，如果你只想用CSS来解决......

CSS标题导航/固定标题导航图像更改

2 个答案: