【问题标题】：Bootstrap Navbar Change on Scroll Up or Down向上或向下滚动时的引导导航栏更改
【发布时间】：2017-12-22 01:21:53
【问题描述】：

我想要在向上或向下滚动时使用导航栏替换 svg 文件。

如您所见，我正在使用。顶部更改导航栏，但我需要它在上下滚动时进行更改，而不像这样设置顶部 > 56。

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    $(document).ready(function() {
      var navpos = $("#navbar_scroll").offset().top;
      $(window).scroll(function() {
        let windowpos = $(this).scrollTop();
        if (windowpos >= navpos) {
          $("#navbar_scroll").addClass('navbar_style_2');
          $("#navbar_scroll").removeClass('navbar_style_3');
          console.log("up");
        } else {
          $("#navbar_scroll").addClass('navbar_style_3');
          $("#navbar_scroll").removeClass('navbar_style_2');
          console.log("down");
        }
      })
    });

<!-- language: lang-html -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <nav id="navbar_scroll" class="navbar navbar-toggleable-sm fixed-top navbar-inverse navbar_style">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
      <a class="navbar-brand hidden-md-up" href="#"><img src="tps.jpg" class="img-fluid" style="width: 27px; height: 27px;"></a>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav mr-auto">
          <a class="nav-item nav-link active " href="tu_pasion_click">1</a>
          <a class="nav-item nav-link " href="tu_voz_click">2</a>
          <a class="nav-item nav-link" href="#">3</a>
          <a class="nav-item nav-link" href="#">4</a>
          <a class="nav-item nav-link" href="#">5</a>
        </div>
        <a class="navbar-brand hidden-sm-down" href="#"><img src="tps.jpg" class="img-fluid" style="width: 27px; height: 27px;"></a>
        <div class="navbar-nav ml-auto">
          <a class="nav-item nav-link" href="#">6</a>
          <a class="nav-item nav-link" href="#">7</a>
          <a class="nav-item nav-link" href="#">8</a>
          <a class="nav-item nav-link" href="#">9</a>
          <a class="nav-item nav-link" href="#">10</a>
        </div>
      </div>
    </nav>

【问题讨论】：

我更新了我的答案。我猜你的#navbar_scroll 可能放错了地方。如果您提供 HTML，我们可能会更好地满足您的需求。
完成，请检查我的更新
您应该编辑问题，而不是提供更新作为“答案”。但是，是的，#navbar_scroll 应该放在要进行更改的容器上。否则你只是得到导航栏的偏移量
对不起，您可以看到我正在提出新的问题，现在我正在尝试使其正常工作，但并非总是如此，我不知道为什么。你能做一个演示吗？
点击我回答中的“DEMO”链接

标签： jquery html css twitter-bootstrap svg

【解决方案1】：

问题

为了检测用户是否在主动滚动，我们需要检查自上次滚动事件以来的时间。由于我们只想触发函数所需的最少次数，我们可以使用 $.debounce。

解决方案

sn-p 演示了 Ben Alman 的 $.debounce，它检测用户的滚动。更准确地说，它检测到事件在设定的时间后没有发生，然后触发该函数。这将允许函数在设定的毫秒数后触发一次

$.debounce(delay, at_begin, callback)

注意，at_begin 默认为 false：

（布尔值）可选，默认为 false。如果 at_begin 为 false 或未指定，回调将仅在最后一次 debounced-function 调用后执行 delay 毫秒。如果 at_begin 为真，回调将仅在第一次去抖动函数调用时执行。（在 delay 毫秒内没有调用节流函数后，内部计数器被重置）

如果 at_begins 是 true，那么函数将在第一次函数调用时触发（在设置的延迟之后）。

如果at_begins 是false，那么函数只会在最后一个事件被调用后（在设置的延迟之后）触发一次

(function(window,undefined){
  '$:nomunge'; 
  var $ = window.jQuery || window.Cowboy || ( window.Cowboy = {} ),

      jq_throttle;

  $.throttle = jq_throttle = function( delay, no_trailing, callback, debounce_mode ) {

    var timeout_id,

        last_exec = 0;

    if ( typeof no_trailing !== 'boolean' ) {
      debounce_mode = callback;
      callback = no_trailing;
      no_trailing = undefined;
    }

    function wrapper() {
      var that = this,
          elapsed = +new Date() - last_exec,
          args = arguments;

      function exec() {
        last_exec = +new Date();
        callback.apply( that, args );
      };

      function clear() {
        timeout_id = undefined;
      };

      if ( debounce_mode && !timeout_id ) {
        exec();
      }

      timeout_id && clearTimeout( timeout_id );

      if ( debounce_mode === undefined && elapsed > delay ) {
        exec();

      } else if ( no_trailing !== true ) {

        timeout_id = setTimeout( debounce_mode ? clear : exec, debounce_mode === undefined ? delay - elapsed : delay );
      }
    };

    if ( $.guid ) {
      wrapper.guid = callback.guid = callback.guid || $.guid++;
    }

    return wrapper;
  };

  $.debounce = function( delay, at_begin, callback ) {
    return callback === undefined
      ? jq_throttle( delay, at_begin, false )
    : jq_throttle( delay, callback, at_begin !== false );
  };

})(this);

//Here is the implementation of $.debounce
$(window).scroll($.debounce(0, true, function(){
  $('nav').addClass('hide');
}, 250));

$(window).scroll($.debounce( 250, function(){
  $('nav').removeClass('hide');
} ) );

body{
  height: 6000px;
}

.svg{
  position: fixed;
  top: 0;
  z-index: 20;
}

.mt-100{
  margin-top: 100px;
}

.hide{
  visibility: hidden;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <img class="svg" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/262726/pattern.svg" width="100%"/>
 <nav class="fixed-top navbar navbar-toggleable-md navbar-inverse bg-inverse">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </nav>
<div class="container mt-100"><h1>Scroll Down</h1></div>
</body>

【讨论】：

更新提供了更多的 cmets 和一支笔。
你好，乔，我正在检查它，给几分钟看看它
嘿乔，我想我没有给你确切的要求，也许用一个例子很好地解决了这个问题。我希望我的导航栏具有类似 www.marca.com（移动版）的行为，如您所见，导航栏在滚动时发生变化（对我来说，变化将是一个 svg 图形），当没有滚动时（表现得像普通导航栏） .你现在明白了么？谢谢
好的，我已经创建了几个示例。第一个响应类似于 marca 站点，其中 svg 在向下滚动时显示，导航栏在向上滚动时返回。第二个应用 .debounce 并在用户主动滚动时添加图像，但在用户停止时返回导航菜单。希望其中之一能让你更接近。让我知道，我会更新我的答案。 Option 1 或 Option 2
你好乔。我来检查一下。感谢您的耐心等待

【解决方案2】：

这对你有用

var scrollTop = document.body.scrollTop;
window.onscroll = function() {
    if(document.body.scrollTop > scrollTop) {
        // Down Scrolling
        scrollTop = document.body.scrollTop;
    }
    else {
        // SCrolling Up
        scrollTop = document.body.scrollTop;
    }
}

【讨论】：

【解决方案3】：

这是一个小例子，向您展示如何在滚动时捕获事件：

var navpos = $(".container").offset().top;
$(window).scroll(function() {
  let windowpos = $(this).scrollTop();
  if (windowpos >= navpos) {
    console.log("You scrolled!"); // your code comes here.
  }
});

.container {
  height: 900px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

【讨论】：

【解决方案4】：

这里是sn-p：

$(document).ready(function() {
  var navpos = $("#navbar_scroll").offset().top;
  $(window).scroll(function() {
    let windowpos = $(this).scrollTop();
    if (windowpos >= navpos) {
      $("#navbar_scroll").addClass('navbar_style_2');
      $("#navbar_scroll").removeClass('navbar_style_3');
      console.log("up");
    } else {
      $("#navbar_scroll").addClass('navbar_style_3');
      $("#navbar_scroll").removeClass('navbar_style_2');
      console.log("down");
    }
  })
});

<nav id="navbar_scroll" class="navbar navbar-toggleable-sm fixed-top navbar-inverse navbar_style">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
  <a class="navbar-brand hidden-md-up" href="#"><img src="tps.jpg" class="img-fluid" style="width: 27px; height: 27px;"></a>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav mr-auto">
      <a class="nav-item nav-link active " href="tu_pasion_click">1</a>
      <a class="nav-item nav-link " href="tu_voz_click">2</a>
      <a class="nav-item nav-link" href="#">3</a>
      <a class="nav-item nav-link" href="#">4</a>
      <a class="nav-item nav-link" href="#">5</a>
    </div>
    <a class="navbar-brand hidden-sm-down" href="#"><img src="tps.jpg" class="img-fluid" style="width: 27px; height: 27px;"></a>
    <div class="navbar-nav ml-auto">
      <a class="nav-item nav-link" href="#">6</a>
      <a class="nav-item nav-link" href="#">7</a>
      <a class="nav-item nav-link" href="#">8</a>
      <a class="nav-item nav-link" href="#">9</a>
      <a class="nav-item nav-link" href="#">10</a>
    </div>
  </div>
</nav>

【讨论】：