向上或向下滚动时Bootstrap Navbar更改

Question

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

如你所见，我正在使用。顶部改变de navbar，但是我需要它来改变上下滚动而不做顶部＆gt; 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>

Answer 1

问题

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

解决方案

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

$.debounce(delay, at_begin, callback)

注意，默认情况下at_begin为false：

  

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

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

如果at_begins为false，则只有在调用最后一个事件后（设置延迟后），该函数才会触发一次

Read more about $.debounce and $.throttle plugin

＆＃13;

＆＃13;

(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');
} ) );

＆＃13;

body{
  height: 6000px;
}

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

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

.hide{
  visibility: hidden;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 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;
    }
}

Answer 3

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

＆＃13;

＆＃13;

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

＆＃13;

.container {
  height: 900px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

以下是摘录：

＆＃13;

＆＃13;

$(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");
    }
  })
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;