화면 검사 후 스크립트가 실행됩니다.

Question

여기서 내가하는 일은 헤더의 불투명도를 변경하고 웨이 포인트 (더 큰 검색 창)에 도달 할 때 검색 창을 추가하는 것입니다. 작동합니다. 여기서 문제는 창을 검사하고 화면 크기를 변경 한 후에 만 ​​변경이 적용된다는 것입니다.

심지어 간단한 콘솔 로그는 헤더 HTML 창

에게 커피 스크립트

$(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 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> 

레일 버전 : 4.2.6.

터보 링크 : 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 
    ... 
} 

이 모든 작업을 수행해야합니다.