Question

我在向下滚动时有第二个导航，但是当我点击导航链接到达那里时，它就消失了。我在下面创建了onclick函数，但是它可以工作，但它只能工作一次....在第二次单击时，导航栏不会重新出现，直到滚动发生。

的Javascript

$(document).ready(function(){

   $(window).on('scroll', function () {

      if ($(this).scrollTop() > 500) {
        $('#appear-nav').fadeIn(300);
      } else {
        $('#appear-nav').fadeOut(100);
      }

      if ($(window).scrollTop() > 1100) {
         $('#appear-about').css('color','#b0eb00');
      } else {
         $('#appear-about').css('color','#ffffff');
      }
      if ($(window).scrollTop() > 1900) {
         $('#appear-about').css('color','#ffffff');
      }
      if ($(window).scrollTop() > 2150) {
        $('#appear-tech').css('color','#b0eb00');
      } else {
        $('#appear-tech').css('color','#ffffff');
      }
  });

  $('#appear-about').on('click', function() {
     $('#appear-nav').fadeIn(100);
     $(this).css('color','#b0eb00');
  });

  $('#appear-tech').on('click', function() {
     $('#appear-nav').fadeIn(100);
     $(this).css('color','#b0eb00');
  });
  $('#appear-home').on('click', function() {
     $('#appear-nav').fadeOut(100);
  });

  //end function
});

HTML

<div id="appear-nav">
  <ul class="appear-nav-ul">
    <li id="appear-home"><%= link_to "home", root_path %></li>
    <li>
      <a id="appear-about" href="/#first-home-image">about</a>
    </li>
    <li>
      <a id="appear-tech" href="/#second-home-image">tech</a>
    </li>
    <li><%= link_to "team", team_path %></li>
    <li>
      <a href="/"><img src="/assets/small-logo.png" id="appear-logo">
      </a>
    </li>
    <li><%= link_to "projects", projects_path %></li>
    <li><%= link_to "news", about_path %></li>
    <li><%= link_to "contact", contact_path %></li>
    <% if logged_in? %>
      <li><%= link_to "Users", users_path %></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data- toggle="dropdown">Account<b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li><%= link_to "Profile", current_user %></li>
          <li><%= link_to "Settings", 
                                      edit_user_path(current_user) %></li>
          <li class="divider">(divider)</li>
          <li><%= link_to "Log out", logout_path, method: 
                                       :delete %></li>
        </ul>
      </li>
    <% else %>
      <li><%= link_to "login", login_path %></li>
    <% end %>
  </ul>
</div>

Answer 1

试试这个

$(document).ready(function(){
  $('#appear-nav').css('display', 'none');

  $(window).on('scroll', function () {
    // set distance user needs to scroll before we fadeIn navbar
    if ($(this).scrollTop() > 500) {
      $('#appear-nav').fadeIn(300);
    } else {
      $('#appear-nav').fadeOut(100);
    }
  });
});



$('#appear-tech', '#appear-about').on('click', function() {
   $('#appear-nav').fadeIn(50);
});

.on'click'函数只工作一次，即使它包含在document.ready函数中

1 个答案: