腳本執行後檢查窗口

Question

我在這裏做的是改變標題的不透明度，並添加一個搜索欄，當它到達一個航點（一個更大的搜索欄）。 它的工作原理，這裏的問題是，只有在檢查窗口並在屏幕尺寸之間切換後纔會應用更改。

即使是一個簡單的控制檯日誌只檢查窗戶

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。

Turbolinks：5.0.1

基金會6.3。

航點（Latests版本，涼亭安裝）

Answer 1

這是一個CSS問題與衝突的方式工作waypoint.js。

您需要更改的第一件事是刪除屬性height: 100%body，但保留在html。

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

然後，你header位置屬性必須fixed，而不是absolute。

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

如果你這樣做，它應該工作。