Question

我不知道我的代码出了什么问题。我正在使用bootstrap 3，当用户滚动到页面底部时，我想向我的<nav>添加一个类，当他滚动到顶部时删除该类。

非常奇怪，jQuery正常工作（我放了一个代码来隐藏<h1>元素进行测试。然而，滚动功能它不起作用。这非常奇怪和令人沮丧，因为确切当使用bootstrap 4时，相同的代码在其他项目中工作（我这次需要使用BS3）。

有人能看出我做错了什么吗？ Bootstrap上有什么东西阻止滚动时的addClass吗？

以下是代码：

$(document).ready(function() {
  $(window).on('scroll', function() {
    if ($(window).scrollTop()) {
      $('nav').addClass('sticky');
    } else {
      $('nav').removeClass('sticky');
    }
  });

  $(document).ready(function() {
    $("h1").click(function() {
      $(this).hide();
    });
  });
});

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  font-family: 'Montserrat', sans-serif;
}

.flex {
  display: flex;
}

.row {
  margin-right: 0;
  margin-left: 0;
}

.site-container {
  /*max-width:1920px;*/
  margin: 0 auto;
}

.marged-left-only {
  padding-left: 0;
  padding-right: 0;
}


/* changing active page (navbar menu) style */

.navbar-inverse .navbar-nav>li>a {
  transition: all .5s ease-in-out;
}

.navbar-inverse .navbar-nav>li>a:hover {
  color: #ed1c24;
}

.navbar {
  background-image: url("../images/radial-gradient-nav.jpg");
  background-size: cover;
  background-position: left top;
  background-repeat: no-repeat;
  min-height: 80px;
  margin-bottom: 0;
  border-radius: 0;
  border: none;
  font-weight: 600;
  text-transform: uppercase;
}


/* reseting negative margin-left (-15px) default on bootstrap */

.navbar>.container-fluid .navbar-brand {
  margin-left: 0;
}

.navbar-brand {
  height: 80px;
  padding: 0;
  line-height: 80px;
}

.navbar-brand img {
  height: 100%;
  width: auto;
}

.navbar-toggle {
  /* (80px - button height 34px) / 2 = 23px */
  margin-top: 23px;
}

.navbar-collapse {
  padding-right: 0;
  padding-left: 0;
}

.navbar-nav li a {
  padding-right: 0;
  padding-left: 0;
  margin-left: 30px;
}

main p {
  font-size: 2em;
  max-width: 300px;
  line-height: 2.2em;
}

@media only screen and (min-width: 768px) {
  .container-fluid {
    margin-right: 30px;
    margin-left: 30px;
  }
  .navbar-nav>li>a {
    /* (80px - line-height of 27px) / 2 = 26.5px */
    padding-top: 26.5px;
    padding-bottom: 26.5px;
    line-height: 27px;
  }
}

@media only screen and (min-width: 1200px) {
  .container-fluid {
    margin-right: 90px;
    margin-left: 90px;
  }
  .navbar {
    min-height: 160px;
  }
  .navbar-brand {
    height: 160px;
    line-height: 160px;
  }
  .navbar-nav>li>a {
    /* (80px - line-height of 27px) / 2 = 26.5px */
    padding-top: 53px;
    padding-bottom: 53px;
    line-height: 53px;
  }
}

@media only screen and (min-width: 1366px) {
  .container-fluid {
    margin: 0px 120px;
  }
}

@media only screen and (min-width: 1700px) {
  .container-fluid {
    margin: 0px 220px;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>TESTE sticky</title>

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/main.css">

</head>

<body>


  <!-- NAVBAR AREA -->

  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

        <a class="navbar-brand" href="#">
          <img src="images/logo.png" alt="">
        </a>
      </div>

      <!-- navbar-collapse -->
      <div id="navbar" class="navbar-collapse collapse navbar-right">
        <ul class="nav navbar-nav">

          <li><a href="#">nous joindre</a></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </nav>

  <main>
    <h1>Hello, world!</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sint magni ratione delectus, id laborum ex aut non eius, reiciendis quae beatae at fuga cum dolores dicta nihil! Culpa, totam!</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, reiciendis dolore vitae qui laborum earum cumque ratione commodi! Sit voluptate, esse sunt. Alias in officiis, qui fugit, omnis illum sequi.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, reiciendis dolore vitae qui laborum earum cumque ratione commodi! Sit voluptate, esse sunt. Alias in officiis, qui fugit, omnis illum sequi.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, reiciendis dolore vitae qui laborum earum cumque ratione commodi! Sit voluptate, esse sunt. Alias in officiis, qui fugit, omnis illum sequi.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, reiciendis dolore vitae qui laborum earum cumque ratione commodi! Sit voluptate, esse sunt. Alias in officiis, qui fugit, omnis illum sequi.</p>
  </main>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->

  <script src="js/bootstrap.min.js"></script>
</body>

</html>

Answer 1

我发现了问题。

应用于我的CSS顶部的html元素的隐藏溢出显然阻止了侦听滚动事件。

使用jQuery的addClass不能处理滚动

1 个答案: