Script executes after inspecting window - ruby-on-rails

Question

What I'm doing here is changing the opacity of the header and adding a searchbar when it reaches a waypoint (A bigger searchbar). It works, the problem here is that the change is only applied after I inspect the window and change between screen sizes.
Even a simple console log only happens after inspecting the 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))" })
})
Header 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>
HomePage
<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 version: 4.2.6.
Turbolinks: 5.0.1
Foundation 6.3.
Waypoints (Latests version, installed with bower)

Answer 1

This is a css issue clashing with the way waypoint.js works.
First thing you need to change is remove the property height: 100% on body, but keep it on html.
html{
height: 100%; # not on body, just html
...
}
Then, your header position attribute needs to be fixed and not absolute.
header{
position: fixed; # not absolute
...
}
If you do all this it should work.