javascript - 如果它有足够的宽度，则在准备好和滚动时更改类

Question

我正在开发一个网站，在顶部我有一个固定菜单和一个 slider (均来自 Bootstrap )。

我的问题是菜单文本作为网站背景是白色的，并且菜单是透明的，所以我添加了一个 javascript 函数，当 slider 到达 slider 末尾时更改菜单背景。

jQuery("document").ready(function($){

    var nav = $('.navbar');

    $(window).scroll(function () {
        if ($(this).scrollTop() > document.getElementById('slider').clientHeight - document.getElementById('navbar').clientHeight) {
        nav.addClass("navbar3");
        nav.removeClass("navbar2");
    } else {
        nav.removeClass("navbar3");
        nav.addClass("navbar2");
    }
});
});

使用这个 CSS

.navbar2 {
    z-index: 99;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    border-radius: 0px;
    background-color: rgba(255, 0, 0, 0);
}

.navbar3 {
    z-index: 99;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    border-radius: 0px;
    background-color: rgba(237, 125, 49, 0.5);
}

(默认类是 navbar2)

到这里没问题。

现在，当我在不同的分辨率下测试网站时，我发现当视口(viewport)小于 453 像素时(并且 Bootstrap 菜单已经将菜单更改为下拉菜单)下拉菜单已经在 slider 下方完成，所以不可能看到我尝试做的最后一个元素:

1. 将默认类更改为 navbar3
2. 添加一个 if 以便仅当视口(viewport)大于 453 像素时类才会更改(如果小于 453 像素，菜单背景永远不会透明)。

但这是一个失败，因为只有当我在更改分辨率的同时不断重新加载页面时才会这样，所以我又更改了一次，这样它也可以在调整大小时发生变化:

jQuery("document").ready(function($){

    var nav = $('.navbar');

    function addnav3() {
        nav.addClass("navbar3");
        nav.removeClass("navbar2");
    }
    function addnav2() {
        nav.addClass("navbar2");
        nav.removeClass("navbar3");
    }

    if ($(window).width() > 453) {
       addnav2();
       $(window).scroll(function () {
            if ($(this).scrollTop() > document.getElementById('slider').clientHeight - document.getElementById('navbar').clientHeight) {
                addnav3();
            }
            else {
                addnav2();
            }
        });
    }


$(window).resize(function () {
    if ($(window).width() > 453) {
       addnav2();
       $(window).scroll(function () {
            if ($(this).scrollTop() > document.getElementById('slider').clientHeight - document.getElementById('navbar').clientHeight) {
                addnav3();
            }
            else {
                addnav2();
            }
        });
    }
    else {
        addnav3();
    }
});
});

现在，当我调整大小时它确实发生了变化，但是如果我走到 slider 的末尾并返回，菜单背景就会消失...

我对 javascript 不是很熟悉，所以有什么想法吗？我将在此处发布所有 HTML。

<nav class="navbar navbar3" id="navbar">
         <div class="container-fluid">
           <!-- Brand and toggle get grouped for better mobile display -->
           <div class="navbar-header">
               <a class="navbar-brand" href="#">
                   <img id="logo" alt="Brand" src="<?php echo $imagesfolder; ?>Untitled-1.png">
               </a>
               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                   <span class="sr-only">Toggle navigation</span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
               </button>

           </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
             <ul class="nav navbar-nav navbar-right">
               <li><a href="#">Página Inicial</a></li>
               <li><a href="#">Produtos</a></li>
               <li><a href="#">Sobre Nós</a></li>
             </ul>
           </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>

<div class="" id="slider">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  <li data-target="#myCarousel" data-slide-to="1"></li>
  <li data-target="#myCarousel" data-slide-to="2"></li>
  <li data-target="#myCarousel" data-slide-to="3"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
  <div class="item active">
    <img src="<?php echo $imagesfolder; ?>transferir.jpg" alt="" width="460" height="345">
  </div>

  <div class="item">
    <img src="<?php echo $imagesfolder; ?>transferir%20(1).jpg" alt="" width="460" height="345">
  </div>

  <div class="item">
    <img src="<?php echo $imagesfolder; ?>transferir%20(2).jpg" alt="" width="460" height="345">
  </div>

  <div class="item">
    <img src="<?php echo $imagesfolder; ?>images.jpg" alt="" width="460" height="345">
  </div>
</div>

<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
   </a>
  </div>
</div>

提前谢谢你，MDC

Answer 1

我通过更改 javascript、取消绑定(bind)事件监听器来使其工作:

jQuery("document").ready(function($){

var nav = $('.navbar');

function addnav3() {
    nav.addClass("navbar3");
    nav.removeClass("navbar2");
}
 function addnav2() {
    nav.addClass("navbar2");
    nav.removeClass("navbar3");
}

    if ($(window).width() > 453) {
        addnav2();
       $(window).scroll(function () {
            if ($(this).scrollTop() > document.getElementById('slider').clientHeight - document.getElementById('navbar').clientHeight) {
                addnav3();
            }
            else {
                addnav2();
            }
        });
    }
    else {
        $(this).unbind('scroll');
        addnav3();
    }


$(window).resize(function () {
    addnav2();
    if ($(window).width() > 453) {
       $(window).scroll(function () {
            if ($(this).scrollTop() > document.getElementById('slider').clientHeight - document.getElementById('navbar').clientHeight) {
                addnav3();
            }
            else {
                addnav2();
            }
        });
    }
    else {
        $(this).unbind('scroll');
        addnav3();
    }
});
      });