我在这里做的是改变标题的不透明度，并在到达航点时添加搜索栏（更大的搜索栏）。 它有效，这里的问题是只有在我检查窗口并在屏幕大小之间切换后才会应用更改。
即使是简单的控制台日志也只在检查窗口后发生
的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。
Turbolinks：5.0.1
基金会6.3。
Waypoints（Latests版本，安装了凉亭）
答案 0 :(得分：2)
这是一个与waypoint.js工作方式冲突的CSS问题。
您需要更改的第一件事是删除height: 100%上的属性body，但请将其保留在html上。
html{
height: 100%; # not on body, just html
...
}
然后，您的header排名属性需要为fixed，而不是absolute。
header{
position: fixed; # not absolute
...
}
如果你这样做，它应该有效。