Jquery 和 Bootstrap 4 - 用于调整大小和滚动顶部的导航栏转换

Question

您好，所以我遇到了一个障碍，我的初学者头脑无法解决。使用 Bootstrap 4 导航栏和一些 jquery，我能够创建一个过渡，当用户滚动经过特定点时，将不可见的导航栏变成纯色。我试图在这里搜索一些提示和答案，但似乎找不到解决方案。这是我的滚动代码。

navScroll(){
    $(document).ready(function() {
        $(window).scroll(function(){
            if($(document).scrollTop() > 500) {
                $('.navbar').addClass('solid');
                $('.nav-link').addClass('black');
                $('.navbar-brand').addClass('black');
            }
            else{
                $('.navbar').removeClass('solid');
                $('.nav-link').removeClass('black');
                $('.navbar-brand').removeClass('black');
            }
        });
    });
}

现在，当我将窗口宽度调整到超过 700 像素时，我希望导航栏变成纯白色，并在上下滚动时保持这种状态。只有当窗口调整到 700 像素以外时，JQ 滚动代码才会重新发挥作用。

所以我尝试使用它来调整宽度:

navWidth(){
    $(document).ready(function() {
        $(window).resize(function() {
            if($(document).width() < 700){
                $('.navbar').addClass('solid');
                $('.nav-link').addClass('black');
                $('.navbar-brand').addClass('black');
            }
        })
    })
}

所以这就是我卡住的地方:我知道我需要做一些有条件的，但我不知道如何继续。这是我尝试过但失败的一件事(当然它失败了，但我想看看它是否有效，它只做了一半，但没有完全成功)。

navCheck(){
    $(document).ready(function() {
        if($(document).width() < 700){
          $(window).resize(function(){
              $('.navbar').addClass('solid');
              $('.nav-link').addClass('black');
              $('.navbar-brand').addClass('black');
          })
      }
      else if($(document).scrollTop() > 500) {
          $(window).scroll(function(){
              $('.navbar').addClass('solid');
              $('.nav-link').addClass('black');
              $('.navbar-brand').addClass('black');
          })
      }
      else{
          $('.navbar').removeClass('solid');
          $('.nav-link').removeClass('black');
          $('.navbar-brand').removeClass('black');
      }
   })
}

Answer 1

你可以这样做:

$(window).on("load resize scroll", function(e){
    if($(document).width() < 700 || $(document).scrollTop() > 500){ 
        $('.navbar').addClass('solid');
        $('.nav-link').addClass('black');
        $('.navbar-brand').addClass('black');
    } 
    else {
        $('.navbar').removeClass('solid');
        $('.nav-link').removeClass('black');
        $('.navbar-brand').removeClass('black');
    }
});

编辑:或者，如果您只想在滚动传递 500 时再添加一个条件:

$(window).on("load resize scroll", function(e){
    if(($(document).width() < 700 && $(document).scrollTop() > 500)
       || $(document).scrollTop() > 500){ 
        $('.navbar').addClass('solid');
        $('.nav-link').addClass('black');
        $('.navbar-brand').addClass('black');
    } 
    else {
        $('.navbar').removeClass('solid');
        $('.nav-link').removeClass('black');
        $('.navbar-brand').removeClass('black');
    }
});

编辑:使用 $(window).on("load resize scroll", function(e){}); 绑定(bind) 3 个事件，另一种方式是:

$(window).bind({
     load:function(){

     },
     resize:function(){

     },
     scroll:function(){

    }
});

因此，在加载调整大小或滚动时，您检查宽度和滚动条位置。如果您的条件得到满足，您的导航就会很稳固。