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

时间：2017-08-23 19:33:12

标签： javascript html css ruby-on-rails

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>

2 个答案:

答案 0 :(得分：1)

这个想法是每次更新相同图像标记的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);
}

答案 1 :(得分：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>
  • 徽标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;
  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文件没有任何问题。只需确保jquery-rails中有Gemfile，并且application.js //= require jquery需要SELECT h.Type, a.name, CASE WHEN a.name LIKE '%-%' THEN LEFT(a.name, CHARINDEX('-', a.name) - 1) ELSE a.name END as FirstPart, CASE WHEN a.name LIKE '%-%' THEN RIGHT(a.name, CHARINDEX('-', Reverse(a.v)) - 1) END as LastPart FROM Table1 a LEFT JOIN Table2 h ON a.FirstPart = h.ID

相关问题
最新问题