Скрипт выполняется после проверки окна

То, что я делаю здесь, - это изменение непрозрачности заголовка и добавление панели поиска, когда она достигает путевой точки (большая панель поиска). это работает, проблема здесь в том, что изменение применяется только после того, как я проверяю окно и меняю размеры экрана.

Даже простой журнал консоли происходит только после проверки 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' %>

SearchBox Partial

<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.

Путевые точки (последняя версия, установленная с bower)