javascript - 隐藏两个导航元素，直到并且除非它水平滚动到页面的 70px

Question

我在页面左上角有一个LOGO，在页面右上角有一个搜索栏。我在该 Logo 和搜索栏下方有一个 position:fixed 导航栏，一旦向下滚动 Logo 部分，它就会固定。

现在的问题是当我向下滚动 Logo 部分时，搜索栏和另一个元素应该进入导航栏中的可见模式。

这是 Fiddle

请帮我做这件事，搜索了很多，但这让我筋疲力尽。

window.onscroll = changePos;function changePos() {
var header = document.getElementById("header");
if (window.pageYOffset > 70) {
    header.style.position = "fixed";
    header.style.top = "0";
} else {
    header.style.position = "";
    header.style.top = "";
}}

Answer 1

你可以试试这个:

• 首先添加一个类来隐藏您的元素:

   <li class="hiden"> <a href="#">Logo</a></li>
   <li class="hiden"> <a href="#">Search</a></li>
  
   .wrapper #nav li.hiden {
      display:none;
   }
  

• 然后将 show() 和 hide() 添加到该类的 Jquery 方法中:

  function changePos() {
    var header = $('#header'),
    sT = $(window).scrollTop();
    if (sT > 70) {
      header.css({'position':'fixed','top':'0'});
      $('.hiden').show();
    } else {
      header.css({'position':'relative','top':' '});
      $('.hiden').hide();
    }
  

演示 http://jsfiddle.net/v97qg/8/