Javascript 如何在导航前判断元素是否在屏幕上？

我在我的网站上添加了SlideUp和SlideDown jquery动画（单击>>>），但是，当用户导航到一个新页面时，他们必须重新滑动在最后一页上滑动的元素。是否有任何方法可以检测元素在导航前是否可见

$(function(){ 
if (sessionStorage.getItem("tabvisible")) {
$(".jumbotron").slideDown();//display header
} else {
$("jumbotron").slideUp();//hide header
}

$('.information').hide().fadeIn('slow');


$("#expandiconup").click(function(){
$(".jumbotron").slideUp();
 sessionStorage.setItem("tabvisible", false);
});
$("#expandicondown").click(function(){
$(".jumbotron").slideDown();
sessionStorage.setItem("tabvisible", true);

}); 

---

用JavaScript实现这一点并不是非常容易，我相信有比我将要展示的更好的方法。但是如果我是你的话，我会研究像Angular这样的前端框架来处理你的视图，这样你的标题就不必重新加载，并且状态会在整个页面中保持不变

无论如何，要真正解决这个问题，可以使用CSS

：target

伪选择器加上一些JavaScript。本质上，每当您单击“显示”链接时，您都会使用JavaScript向导航中的每个URL追加一个哈希。这样，当它们被单击时，加载的新页面将在其末尾有一个散列。然后，如果该散列与页面上某个元素的ID匹配（在本例中，它将是您正在显示/隐藏的内容），那么您可以利用CSS

：target

伪选择器来简单地隐藏（

显示：none

）该元素

下面是一个简单的例子（我在CodePen中设置了这个，但是如果没有实际的HTML页面链接，很难演示）：

HTML

<header>
  <p class="header-content" id="headerHidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac orci eros. Nunc ultrices augue in suscipit pulvinar. Morbi eget tempus sem, eget lobortis enim. Fusce scelerisque odio vel lorem ullamcorper tincidunt. Pellentesque accumsan lobortis imperdiet. Donec pharetra id enim et vestibulum. Nunc pulvinar, diam et condimentum accumsan, lacus libero sagittis erat, a accumsan risus justo nec quam. Maecenas quis accumsan velit. Suspendisse porttitor velit nec ipsum bibendum elementum. Aenean feugiat non nisi a eleifend.</p>

  <a href="#" class="hide-header-content">Hide header content</a>

  <a href="#" class="show-header-content">Show header content</a>

  <nav>
    <ul>
      <li><a href="/link1">Link 1</a>
      <li><a href="/link2">Link 2</a>
      <li><a href="/link3">Link 3</a>
      <li><a href="/link4">Link 4</a>
      <li><a href="/link5">Link 5</a>
    </ul>
  </nav>
</header>

JavaScript（使用jQuery）

这确实是一种处理问题的黑客方式，但听起来像是我想解决的一个有趣的问题。使用此方法，您可能会遇到浏览器“跳转”到ID与URL中哈希匹配的元素的问题。在您的情况下，因为它位于页面顶部，所以不应该成为问题

---

最后，我知道我的标记并不完全是你的，但我希望你至少能理解我的意思，并在这里找到一些有用的东西

使用本地存储怎么样

$("#expandiconup").click(function () {
    localStorage.setItem("tabvisible", false);
});

$("#expandicondown").click(function () {
    localStorage.setItem("tabvisible", true);
});

然后在加载新页面时，验证该值

if (localStorage.getItem("tabvisible") == true) {
    //display header
} else {
    //hide header
}

---

什么>>>？我看到上下箭头，没有正确的。如果导航是正常请求，则浏览器没有内存，除非您让它记住。您必须使用cookies和服务器端协作，或者您需要使用本地存储来记住您想要记住的东西。如果是AJAX，则可以使用变量。如果你只是隐藏东西而不是替换它们，那么有些东西会被保留下来，但历史位置不在其中。是的，我说>>>时说的是上下箭头。谢谢你的回复。我将研究cookies/ajax，但它似乎不起作用。我用我实现你们答案的方式更新了这个问题。我让它工作了。麻烦的是我忘了一本书。在琼伯伦之前。此外，true/false值被存储为字符串，因此我没有使用sessionStorage.tabvisible==true，而是使用sessionStorage.tabvisible==true

$("#expandiconup").click(function () {
    localStorage.setItem("tabvisible", false);
});

$("#expandicondown").click(function () {
    localStorage.setItem("tabvisible", true);
});

if (localStorage.getItem("tabvisible") == true) {
    //display header
} else {
    //hide header
}