CSS Header Nav / Fixed Header Nav 图像更改答案

【问题标题】：CSS Header Nav / Fixed Header Nav image changeCSS Header Nav / Fixed Header Nav 图像更改
【发布时间】：2016-02-18 07:22:21
【问题描述】：

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

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

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

我最初的方法可能是使用 css，但就目前而言，我对如何处理这个问题持观望态度，导航样式的文本很好，只是关于如何切换的任何想法图像到我计划放在那里的第二个。

如果有人有一个粗略的想法可以帮助我，我将非常感激并接受它。

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

【问题讨论】：

看看这个stackoverflow.com/questions/12142386/…

标签： html css header hover

【解决方案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>

这也是你的general.js，你可以在此时自定义在第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')
            }
        });
    }
};

【讨论】：

这是在你的 General.JS 文件上尝试在它上面放一个刹车点并自定义功能

【解决方案2】：

也许您应该考虑为此使用 JavaScript。当$document.ready() 时，您可以使用setInterval()，这样几秒钟后它就会改变。或者即使你hover它，如果你只想使用CSS来解决......

【讨论】：

这是评论，不是答案。