Ruby on Rails - 更改页面滚动上的徽标图像未激活

Question

Ruby 2.3.1

Rails 5.1.2

当我开始滚动时，我正在尝试将导航栏中的徽标图像更改为另一个，但到目前为止没有成功。在常规 HTML 中，通过这种方式可以正常工作：

<div class="logo">
  <a class="logo-wrap" href="index.html">
    <img class="logo-img logo-img-main" src="img/logo/ymk_logo_lw.png" alt="Ymk Logo">
    <img class="logo-img logo-img-active" src="img/logo/ymk_logo.png" alt="Ymk Logo">
  </a>
</div>

并具有以下 CSS 属性：

.header .logo-img-main {
  display: inline-block;
  transition-duration: 400ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

.header .logo-img-active {
  display: none;
  transition-duration: 400ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

.header .logo .logo-img-main {
  display: none;
}
  .header .logo .logo-img-active {
  display: inline-block;
}

.page-on-scroll .header .logo-img-main {
  display: none;
  transition-duration: 400ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.page-on-scroll .header .logo-img-active {
  display: inline-block;
  transition-duration: 400ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

还有 JS：

var Layout = function () {
    'use strict';

    // handle on page scroll
    var handleHeaderOnScroll = function() {
        if ($(window).scrollTop() > 60) {
            // var colorLogoPath = "#{asset_path('logo/ymk_logo.png')}";
            $('body').addClass('page-on-scroll');
            // $('.logo-img .logo-img-active').attr('src', colorLogoPath);
        } else {
            // var whiteLogoPath = "#{asset_path('logo/ymk_logo_lw.png')}";
            $('body').removeClass('page-on-scroll');
            // $('.logo-img .logo-img-main').attr('src', whiteLogoPath);
        }
    }

return {
        init: function () {
            handleHeaderOnScroll(); // initial setup for fixed header

            // handle minimized header on page scroll
            $(window).scroll(function() {
                handleHeaderOnScroll();
            });
        }
    };
}();

$(document).ready(function() {
    Layout.init();
});

在 JS 部分，我注释掉了一些部分，因为我试图实现此 SO question 中的一些代码，但由于它向我显示图像，所以只能到达某个点。

所以我回去决定在html中实现和if声明：

        <div class="logo">
          <a class="logo-wrap">
           <% if image_tag("logo/ymk_logo_lw.png", :class => "logo-img logo-img-main", :alt => "Ymk Logo White") %>
            <%= image_tag("logo/ymk_logo_lw.png", :class => "logo-img logo-img-main", :alt => "Ymk Logo White") %>
           <% else %>
            <%= image_tag("logo/ymk_logo.png", :class => "logo-img logo-img-active", :alt => "Ymk Logo OG") %>
           <% end %>
          </a>
        </div>

现在，当我加载页面时，应该出现的第一个徽标 ymk_logo_lw.png 没有显示，但是当我开始滚动时，第二个徽标出现 ymk_logo.png。

如果有任何建议，我将不胜感激，我对 Ruby 还很陌生，而且我刚刚得到它。谢谢！

application.js 要求：

//= require jquery-3.2.1.min.js
//= require bootstrap-sprockets
//= require swiper/js/swiper.jquery.min.js
//= require components/swiper.min.js
//= require jquery.easing.js
//= require jquery.back-to-top.js
//= require jquery.smooth-scroll.js
//= require jquery.wow.min.js
//= require jquery.parallax.min.js
//= require masonry/jquery.masonry.pkgd.min.js
//= require masonry/imagesloaded.pkgd.min.js
//= require components/wow.min.js
//= require components/masonry.min.js
//= require components/gmap.min.js
//= require rails-ujs
//= require turbolinks
//= require_tree .

`_navbar.html.erb：

    <header class="header navbar-fixed-top">
      <!-- Navbar -->
      <nav class="navbar" role="navigation">
        <div class="container">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="menu-container">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="toggle-icon"></span>
            </button>

            <!-- Logo -->
            <div class="logo">
              <a class="logo-wrap" href="/">
                <%= image_tag("logo/ymk_logo_lw.png", :class => "logo-img logo-img-main", :alt => "Ymk Logo White") %>
                <%= image_tag("logo/ymk_logo.png", :class => "logo-img logo-img-active", :alt => "Ymk Logo OG") %>
              </a>
            </div>
            <!-- End Logo -->
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse nav-collapse">
            <div class="menu-container">
              <ul class="navbar-nav navbar-nav-right">
                <li class="nav-item">
                  <%= link_to "Home", root_path, class: "nav-item-child nav-item-hover #{yield(:root_active)}", :"data-no-turbolink" => true, method: "get" %>
                </li>
                <li class="nav-item">
                  <%= link_to "About", about_path, class: "nav-item-child nav-item-hover #{yield(:about_active)}", :"data-no-turbolink" => true, method: "get" %>
                </li>
                <li class="nav-item">
                  <%= link_to "Contact", contact_path, class: "nav-item-child nav-item-hover #{yield(:contact_active)}", :"data-no-turbolink" => true, method: "get" %>
                </li>
              </ul>
            </div>
          </div>
          <!-- End Navbar Collapse -->
        </div>
      </nav>
      <!-- Navbar -->
    </header>

Answer 1

您不能在那里使用 ERB 解决方案。 ERB 模板在服务器端解析和生成，然后发送到浏览器，因此您的 if/else 子句将在服务器上进行评估，结果将发送到浏览器，您最终拥有一个图像标签。呈现视图后，您无法通过服务器端代码对其进行更改。所以你在你的观点中用 Ruby 做的逻辑是不正确的。

像这样更改您的代码：

html:

<div class='header'>
  <div class="logo">
    <a class="logo-wrap" href="index.html">
      <%= image_tag("logo/ymk_logo_lw.png", :class => "logo-img logo-img-main", :alt => "Ymk Logo White") %>
      <%= image_tag("logo/ymk_logo.png", :class => "logo-img logo-img-active", :alt => "Ymk Logo White") %>
    </a>
  </div>
 </div>

• logo div 应该是header 的子类。如果它已经是这样，请将其删除（可能从部分加载？）
• 注意<%=（等号）。当您想在屏幕上打印表达式时（您目前没有在自己的代码上执行此操作）。

CSS：

.header .logo-img-main {
  display: inline-block;
  transition-duration: 400ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

.header .logo-img-active {
  display: none;
  position: fixed;
  transition-duration: 400ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

.page-on-scroll .header .logo-img-main {
  display: none !important;
  transition-duration: 400ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

.page-on-scroll .header .logo-img-active {
  display: inline-block !important;
  transition-duration: 400ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

• 您对同一类有多个定义，导致它们相互覆盖。
• 我将.header .logo-img-active 更新为position: fixed，以便在滚动时可以看到徽标。

JS：

JS文件没有问题。只要确保你的Gemfile 中有jquery-rails，并且你在application.js 中需要它，比如//= require jquery

Answer 2

思路是每次更新同一个图片标签的src。检查下面的 Javascript 以了解我是如何更新代码的。

<div class="logo">
  <a class="logo-wrap">
    <%= link_to(image_tag("logo/ymk_logo_lw.png", :class => "logo-img logo-img-main", :alt => "Ymk Logo White"), root_path) %>
   </a>
</div>

Javascript（稍微清理一下）

var handleHeaderOnScroll = function() {
    var imagePath = ""
    if ($(window).scrollTop() > 60) {
        imagePath = "#{asset_path('logo/ymk_logo.png')}";
        $('body').addClass('page-on-scroll');
    } else {
        imagePath = "#{asset_path('logo/ymk_logo_lw.png')}";
        $('body').removeClass('page-on-scroll');
    }
    $('.logo-img .logo-img-main').attr('src', imagePath);
}

将您的 CSS 编辑为最小化

.header .logo-img-main {
  display: none;
  transition-duration: 400ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

.page-on-scroll .header .logo-img-main {
  display: inline-block;
  transition-duration: 400ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}