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

Posted 2023-03-05

【中文标题】Jquery 和 Bootstrap 4 - 用于调整大小和滚动顶部的导航栏转换

【英文标题】：Jquery and Bootstrap 4 - Navbar transitions for resize and scrolltop

【发布时间】：2018-11-28 03:01:14

【问题描述】：

嗨，所以我遇到了我的初学者无法解决的障碍。使用 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');
      
   )

【问题讨论】：

你有工作的小提琴或codeply吗？

【参考方案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)); 绑定 3 个事件，另一种方法是：

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

     ,
     resize:function()

     ,
     scroll:function()

    
);

因此，在加载调整大小或滚动时，您会检查宽度和滚动条位置。如果满足您的条件，您就有了可靠的导航。

【讨论】：

最佳实践。当你给予回答任何问题时。尝试解释一下您做了哪些更改或添加了哪些代码来实现结果。

感谢您的帮助。我实际上做了类似的事情，但我度过了最愤怒的时光。我从来没有想过使用.on。非常感谢！