ウィンドウを検査した後にスクリプトが実行される

Question

ここでは、ヘッダーの不透明度を変更し、ウェイポイント（より大きな検索バー）に到達したときに検索バーを追加しています。 問題は、ウィンドウを調べて画面サイズを変更した後にのみ変更が適用されることです。

であっても、簡単なコンソールログは、Windowsのみに

CoffeeScriptの

$(document).ready -> #The indentation is correct 
    if $('#hero-image').length > 0 
    $searchBarMin = $('header #search-bar-group') 
    $searchaBar = $('#big-search-bar') 
    $header = $('header') 
    $nearYou = $('#near-you') 
    $searchBarMin.hide() 
    $header.css({background: "linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0.3))", position: "absolute" }) 
    waypoint = new Waypoint({ 
     element: $('#near-you'), 
     handler: (direction)-> 
      console.log '!///////////////////' 
      if (direction == "down") 
       $searchBarMin.show() 
       $header.css({background: "linear-gradient(rgba(0,0,0,1), rgba(0,0,0,1))" }) 
      else 
       $searchBarMin.hide() 
       $header.css({background: "linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0.3))" }) 
    }) 

ヘッダーHTML

<header id="header-logged-in" class="expanded row"> 
<div id="logo-container" class="small-6 small-push-3 medium-3 medium-push-0 large-2 columns"> 
    <%= link_to root_path do %> 
     <%= image_tag("TA_logo01.png") %> 
    <% end %> 
</div> 
<div class="small-12 medium-3 large-1 text-center columns"> 
    <h6><i><%= link_to "What is TattooAdvisor", what_is_tattoo_advisor_path %></i></h6> 
</div> 
<div id="search-bar-container" class="large-5 show-for-large columns" action='/search' > 
    <%= form_tag search_path, method: :get do %> 
     <div id="search-bar-group" class="row collapse"> 
      <div class="small-9 medium-6 medium-push-2 large-7 large-push-3 columns"> 
       <%= text_field_tag :query, params[:query], data: {autocomplete_source: Artist.order(:name).map{ |u| {id: u.slug, reference: u.reference,state: u.state, label: u.name, image: u.avatar.url(:thumb) }} + Parlour.order(:name).map{ |u| {id: u.slug, label: u.name, reference: u.reference, state: u.state, image: u.avatar.url(:thumb) }}}, class: "name_autocomplete_search input-group-field", placeholder: "Search for parlours and artists"%> 
      </div> 
      <div id="search-button" class="small-2 small-pull-1 medium-pull-2 large-pull-1 columns"> 
       <%= submit_tag "Search", class: "button" %> 
      </div> 
     </div> 
    <% end %> 
</div> 
<div id="log-in-div" class="small-12 medium-6 large-4 menu-centered columns"> 
    <ul class="menu dropdown large-pull-1" data-dropdown-menu> 
     <li> 
      <div class="small-6 medium-6 large-push-2 columns"> 
       <%= avatar_profile_link current_user, "thumb", class: 'logged-in-picture' %> 
      </div> 
      <div class="small-6 small-pull-1 medium-6 large-pull-0 columns"> 
        <h4><%= current_user.display_name %></h4> 
       </div> 
      <ul class="menu"> 
       <li class="upper-pad"> 
        <%= link_to "Profile", profile_standard_path %> 
       </li> 
       <% if current_user.has_role? :artist %> 
        <li class="upper-pad"> 
         <%= link_to "Artist Profile", profile_artist_path %> 
        </li> 
       <% end %> 
       <% if current_user.has_role? :parlour %> 
        <li class="upper-pad"> 
         <%= link_to "Parlour Profile", profile_parlour_path %> 
        </li> 
       <% end %> 
       <li id="premium-drop-down-li"> 
        <b><%= link_to "Upgrade Account", subscription_path %></b> 
       </li> 
       <li class="upper-pad"> 
        <%= link_to "Invite", new_invite_path %> 
       </li> 
       <li class="upper-pad"> 
        <%= link_to "Log Out", destroy_user_session_path, method: :delete %> 
       </li> 
      </ul> 
     </li> 
    </ul> 
    <div class="small-5 small-pull-1 medium-1 medium-pull-3 large-pull-5 columns"> 
     <%= link_to "Review", new_review_path, class:'button' %> 
    </div> 
</div> 
<div id="search-bar-container" class="small-12 columns hide-for-large" action='/search' > 
    <%= form_tag search_path, method: :get do %> 
     <div id="search-bar-group" class="row collapse"> 
      <div id="search-bar" class="small-9 medium-6 medium-push-2 columns"> 
       <%= text_field_tag :query, params[:query], data: {autocomplete_source: Artist.order(:name).map{ |u| {id: u.slug, reference: u.reference,state: u.state, label: u.name, image: u.avatar.url(:thumb) }} + Parlour.order(:name).map{ |u| {id: u.slug, label: u.name, reference: u.reference, state: u.state, image: u.avatar.url(:thumb) }}}, class: "name_autocomplete_search input-group-field", placeholder: "Search for parlours and artists"%> 
      </div> 
      <div id="search-button" class="small-2 small-pull-1 medium-pull-2 columns"> 
       <%= submit_tag "Search", class: "button" %> 
      </div> 
     </div> 
    <% end %> 
</div> 

を検査した後に起こります

ホームページ

<div class="row full-width"> 
<div class="small-12 columns"> 
    <div id="hero-image" class="row expanded"> 
     <div id="front-search-box" class="small-12 medium-6 medium-centered large-4 columns collapse"> 
       <div class="text-center"> 
        <h3><i>Tattoos are art<br> 
        Art is subjective</i></h3> 
        <h5>Find the right artist for your tattoo</h5> 
       </div> 
       <div class="input-group"> 
        <%= render 'search_box' %> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<%= render partial: 'near_you' %> 

サーチ部分

<div class="row collapse"> 
<div class="small-11 menu" action='/search' > 
    <%= form_tag search_path, method: :get do %> 
     <div id="big-search-bar" class="row collapse"> 
      <div class="small-10 column"> 
       <%= text_field_tag :query, params[:query], data: {autocomplete_source: Artist.order(:name).map{ |u| {id: u.slug, reference: u.reference,state: u.state, label: u.name, image: u.avatar.url(:thumb) }} + Parlour.order(:name).map{ |u| {id: u.slug, label: u.name, reference: u.reference, state: u.state, image: u.avatar.url(:thumb) }}}, class: "name_autocomplete_search input-group-field", placeholder: "Search for parlours and artists"%> 
      </div> 
      <div id="search-button" class="small-2 column"> 
       <%= submit_tag "Search", class: "button" %> 
      </div> 
     </div> 
    <% end %> 
</div> 

Railsのバージョン：4.2.6。

ターボリンク：5.0.1

ファンデーション6.3。

ウェイポイント（亭でインストールlatestsのバージョン、）

Answer 1

これはwaypoint.jsが動作する方法と衝突CSSの問題です。

最初に変更する必要があるのは、をbodyに移動し、htmlに保存してください。

html{ 
    height: 100%; # not on body, just html 
    ... 
} 

次に、あなたのheader位置属性はfixedなくabsoluteする必要があります。

header{ 
    position: fixed; # not absolute 
    ... 
} 

これを実行するとうまくいくはずです。