Javascript 使引导导航栏粘滞

因此，我想使用Bootstrap制作一个导航栏，然后当你向下滚动超过150像素时，导航栏有一个稍微透明的背景。我在Stackoverflow上找到的所有示例都不是我需要的：/I我知道如何使用jQuery添加类等，当你向下滚动通过某个高度时，我希望导航栏淡出，然后淡出一个不同的类，但我还没有找到一个方法来做到这一点

我非常感谢您的帮助：）

谢谢，
Ste

答复: jQuery

CSS

HTML

切换导航

您正在使用jQuery吗？如果是这样，也许是这样的

$('#div').click(() => {
    $('#div').fadeOut();


  $('#div')
  .css('background-color', 'green')
  .fadeIn();

});

---

您正在使用jQuery吗？如果是这样，也许是这样的

$('#div').click(() => {
    $('#div').fadeOut();


  $('#div')
  .css('background-color', 'green')
  .fadeIn();

});

---

您只需css转换就可以进行淡入淡出，只需在窗口达到150px时使用jquery toggleClass函数即可

请尝试以下操作：

$(window).on( "scroll", function() {
   $('#secondNav').toggleClass('scrolled', $(this).scrollTop() > 150);
});

还有css

#secondNav.navbar-default{
  background: #000;
  transition: background-color 0.5s ease;
}
#secondNav.scrolled {
  background: rgba(0,0,0,0.5);
}

---

过渡属性将为您提供淡入淡出功能，然后您可以将导航栏默认设置的背景更改为您想要的任何设置。当它达到150px时，它将切换滚动的类并更改背景。

您可以通过css转换来进行淡入淡出，您只需在窗口达到150px时使用jquery toggleClass函数即可

请尝试以下操作：

$(window).on( "scroll", function() {
   $('#secondNav').toggleClass('scrolled', $(this).scrollTop() > 150);
});

还有css

#secondNav.navbar-default{
  background: #000;
  transition: background-color 0.5s ease;
}
#secondNav.scrolled {
  background: rgba(0,0,0,0.5);
}

---

过渡属性将为您提供淡入淡出功能，然后您可以将导航栏默认设置的背景更改为您想要的任何设置。当它达到150px时，它将切换滚动类并更改背景。

我有一个困难的解决方案。您可以创建两个

navbar

。第二个

nav

应该隐藏。当您

滚动

超过

150px

时，它应该是固定位置的

淡入

。下面是我的jQuery代码

$(window).scroll(function(){
    var scrolled = $(window).scrollTop();
    if(scrolled>149){
       $('#second_nav').fadeIn();
    }
    else{
        $('#second_nav').fadeOut();
    }
});

代码下面是第一个导航

<nav class="navbar navbar-default">

代码下面是第二个导航

<nav class="navbar navbar-default navbar-fixed-top" id="second_nav">

---

查看我的现场演示

我有一个困难的解决方案。您可以创建两个

navbar

。第二个

nav

应该隐藏。当您

滚动

超过

150px

时，它应该是固定位置的

淡入

。下面是我的jQuery代码

$(window).scroll(function(){
    var scrolled = $(window).scrollTop();
    if(scrolled>149){
       $('#second_nav').fadeIn();
    }
    else{
        $('#second_nav').fadeOut();
    }
});

代码下面是第一个导航

<nav class="navbar navbar-default">

代码下面是第二个导航

<nav class="navbar navbar-default navbar-fixed-top" id="second_nav">

---

查看

上的“我的现场演示”，看看它们有多个淡入淡出动画。只需插入css文件并添加类。看看它们有多个淡入淡出动画。只需插入css文件并添加类。很高兴为您提供帮助，让您知道将类添加到.navbar默认值可能会更好，因为引导程序最初将css用作背景等等。我将更新答案，以反映您可以忽略我以前的评论，因为您的代码将按原样正常工作，但我更新了答案，以反映您发布的html，因为它以前不在那里。如果您喜欢或不喜欢，您可以使用更新的答案，它们基本相同。很高兴我能帮上忙，快乐的编码。没关系，我把它改成了你的，因为我知道你从哪里来，它确实有点混乱，但尽管如此，我还是发现了为什么xD我还有一个问题，如果你能帮上忙的话。我的页面上有一个滚动按钮，当他们按下按钮时，它会将他们直接带到顶部唯一的问题是导航栏会出现这种奇怪的淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡。与其使用scrollTop（）>150，不如将其设为0，我认为这是因为像素的工作方式，因此快速滚动到顶部会使其淡入淡出非常快，因此将其更改为0修复了我在上一篇评论中提到的问题。您使用什么代码滚动到顶部$（'button'）。在（“click”，function（）{$（“body，html”）.animate（{scrollTop:0}，500）；}）；我已经在chrome、firefox和IE中对此进行了测试，没有任何小故障，只是想让您知道，将类添加到.navbar默认值可能更好，就像bootstrap一样，bootstrap最初使用css作为后台等等。我将更新答案，以反映您可以忽略我以前的评论，因为您的代码将按原样正常工作，但我更新了答案，以反映您发布的html，因为它以前不在那里。如果您喜欢或不喜欢，您可以使用更新的答案，它们基本相同。很高兴我能帮上忙，快乐的编码。没关系，我把它改成了你的，因为我知道你从哪里来，它确实有点混乱，但尽管如此，我还是发现了为什么xD我还有一个问题，如果你能帮上忙的话。我的页面上有一个滚动按钮，当他们按下按钮时，它会将他们直接带到顶部唯一的问题是导航栏会出现这种奇怪的淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡。与其使用scrollTop（）>150，不如将其设为0，我认为这是因为像素的工作方式，因此快速滚动到顶部会使其淡入淡出非常快，因此将其更改为0修复了我在上一篇评论中提到的问题。您使用什么代码滚动到顶部$（'button'）。在（“click”，function（）{$（“body，html”）.animate（{scrollTop:0}，500）；}）；我已经在chrome、firefox和IE上进行了测试，没有任何问题。这一个也很好用，tha