Javascript 隐藏两个导航元素，直到其水平滚动到页面的70像素

我在页面的左上角有一个徽标，在页面的右上角有一个搜索栏。我有一个位置：固定导航栏位于该徽标和搜索栏下方，当徽标部分向下滚动时，它将作为固定导航栏

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

这是

请帮我做这件事，我找了很多，但这耗尽了我的一天

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 = "";
}}

您可以尝试以下方法：

• 首先添加一个类以隐藏元素：

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

---

演示

我会将徽标和搜索放在标题中，只要标题不固定，就让它们处于绝对/相对位置。这意味着我不会直接用JS修复它，而是给头一个CSS类，该类具有fixed属性

我写了全新的东西，因为我对HTML进行了一点重构，因为我认为没有必要写多余的HTML。一个jsfiddle在文章的末尾

HTML:

还有CSS的东西：

html, body { margin: 0; padding: 0; }
body { font-family: sans-serif; }

#top-space {
    height: 70px;
}
#navigation {
    top: 0;
    width: 100%;
    position: static;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;

    background: black;
}

#navigation.fixed {
    position: fixed;
}

#navigation a {
    display: inline-block;
    text-decoration: none;
    color: white;
    padding: 0 1em;
}

#logo {
    position: absolute;
    float: left;
}
#search {
    position: relative;
    float: right;
}

#domain-name, #search {
    margin-top: -70px;
}

#navigation.fixed #domain-name,
#navigation.fixed #search {
    position: static;
    color: white;
    margin-top: 0;
}

或者只是在JSFIDLE中查找它

你是说像这样的事吗

---

你能提供一些代码吗？@NathanLee是的，现在我用Jquery这样做了吗？@Danko嘿，就是这样，非常感谢。我将应用它。@fastto是否为这两个元素添加类。。。如果你能把这个问题复制成fiddle@Fastnto添加一个类是错误的。。您有

class=“nav\u search”class=“hiden”

副本无效，它必须是

class=“nav\u search hiden”

，并且类之间有空格

<div id="top-space"></div>
<div id="navigation">
    <span id="logo">Logo</span>
    <span id="search">Search</span>

    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
</div>

<div id="content">...</div>

window.onscroll = changePos;

function changePos () {
    var header = document.getElementById("navigation");

    if (window.pageYOffset > 70) {
        header.className = 'fixed';
    } else {
        header.className = '';
    }
}

html, body { margin: 0; padding: 0; }
body { font-family: sans-serif; }

#top-space {
    height: 70px;
}
#navigation {
    top: 0;
    width: 100%;
    position: static;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;

    background: black;
}

#navigation.fixed {
    position: fixed;
}

#navigation a {
    display: inline-block;
    text-decoration: none;
    color: white;
    padding: 0 1em;
}

#logo {
    position: absolute;
    float: left;
}
#search {
    position: relative;
    float: right;
}

#domain-name, #search {
    margin-top: -70px;
}

#navigation.fixed #domain-name,
#navigation.fixed #search {
    position: static;
    color: white;
    margin-top: 0;
}