滚动时不同的标题

发布于 2025-01-11 05:05:47 字数 881 浏览 0 评论 0原文

在我的网站上，我有一个固定的 Bootstrap 标头，当我向下滚动时，我需要这个标头来完全更改其内容（而不仅仅是 css）。我考虑过使用 CSS 来做到这一点，使用 display:none 来隐藏整个标题，只在需要时显示另一个标题，但我想知道是否还有另一种更好的方法。

更新

这里是我的一段代码

HTML

<nav id="nav-estatica" class="navbar navbar-expand-md navbar-dark fixed-top">
MY CONTENT
</nav>
<nav id="nav-fija" class="navbar navbar-expand-md navbar-dark fixed-top">
ANOTHER DIFFERENT CONTENT
</nav>

$(function () {
    $(window).scroll(function () {
      if ($(this).scrollTop() > 200) {
        $('#nav-estatica').fadeOut();
        $('#nav-fija').fadeIn();
      } else {
        $('#nav-fija').fadeOut();
        $('#nav-estatica').fadeIn();
      }
    });
});

onscroll 工作正常，但问题是刷新页面时会显示两个导航，而我只希望显示固定导航。我缺少什么？

更新2

用CSS解决

#nav-fija {
    display: none;
}

原文

On my website I have a fixed Bootstrap header and I need this header to completely change its content when I scroll down (not just the css). I thought about doing it with CSS using display:none to hide the whole header and only show the other one when needed but I was wondering if there is another slightly better way.

UPDATE

Here its a piece of my code

HTML

<nav id="nav-estatica" class="navbar navbar-expand-md navbar-dark fixed-top">
MY CONTENT
</nav>
<nav id="nav-fija" class="navbar navbar-expand-md navbar-dark fixed-top">
ANOTHER DIFFERENT CONTENT
</nav>

$(function () {
    $(window).scroll(function () {
      if ($(this).scrollTop() > 200) {
        $('#nav-estatica').fadeOut();
        $('#nav-fija').fadeIn();
      } else {
        $('#nav-fija').fadeOut();
        $('#nav-estatica').fadeIn();
      }
    });
});

The onscroll works fine but the problem is that when refreshing the page both nav's are shown and I only want the fixed-nav to be shown. What am I missing?

UPDATE 2

Solved with CSS