Question

我有一个自举固定导航栏，在滚动时移动到顶部。上面是一个搜索栏，我想在加载时显示，然后滚动它隐藏并显示在菜单栏上。我有一些jquery工作，但它不能很好地工作。它并不总是改变状态，一旦它出现在菜单栏上，如果你继续滚动，它就会消失。这是我的 codepen：http://codepen.io/iamgonge/pen/bqWdJO

$(function() {
  $(document).on("mousewheel", function() {
    if ($(document).scrollTop() < 1) {
      $('.bob').hide();
      $('.hide-me').show();
    } else {
      $('.bob').show();
      $('.hide-me').hide();
    };
  });
});

$('#nav').affix({
  offset: {
    top: $('header').height()
  }
});

$('#sidebar').affix({
  offset: {
    top: 50
  }
});

.navbar {
  background-color: #4F96BA;
}

.navbar-form input,
.form-inline input {
  width: auto;
}

header {
  height: 150px;
}

#nav.affix {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

#sidebar.affix-top {
  position: static;
}

#sidebar.affix {
  position: fixed;
  top: 80px;
}

.mick {
  display: block;
}

.mick .navbar-form {
  padding: 20px 0px;
}

.mick h1 {
  vertical-align: middle;
}

<header class="masthead">
  <div class="container">
    <div class="row">
      <div class="col-sm-8">
        <h1><a href="#">My Jquery is wonky</a>
          <p class="lead">Why is it wonky?</p>
        </h1>
      </div>
      <div class=" col-sm-4 ">
        <div class="mick">
          <div class="pull-right hidden-sm">
            <h1><a href="#"><i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-chevron-down"></i></a></h1>

          </div>
          <div class="bob">
            <form class="navbar-form">
              <input type="text" class="form-control" placeholder="Search">
              <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>


<!-- Begin Navbar -->
<div id="nav">
  <div class="navbar navbar-default navbar-static">
    <div class="container">
      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="glyphicon glyphicon-bar"></span>
        <span class="glyphicon glyphicon-bar"></span>
        <span class="glyphicon glyphicon-bar"></span>
      </a>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li class="divider"></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
        <ul class="nav pull-right navbar-nav">
          <li class="hide-me">
            <form class="navbar-form">
              <input type="text" class="form-control" placeholder="Search">
              <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
            </form>
          </li>
          <li>
            <a href="#"><i class="glyphicon glyphicon-flag"></i> <span class="badge">2</span></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- /.navbar -->
</div>

<!-- Begin Body -->
<div class="container">
  <div class="row">

    <div class="col-sm-12">
      <h2>Content</h2>
      <p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
        voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores </p>
      <p>eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim
        ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>

      <hr class="col-sm-6">

      <h2>Content</h2>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
      sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt
      ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut

      <hr class="col-sm-6">

      <h2>Content</h2>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
      sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt
      ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut

      <hr class="col-sm-6">

      <h2>Content</h2>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
      sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt
      ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut

      <h2>Content butt</h2>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
      sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt
      ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut




    </div>
  </div>
</div>

Answer 1

请删除你在mouswheel上的活动，并添加此代码，如果你滚动超过.masthead身高，这将隐藏/显示

 private static final int MY_PERMISSIONS_REQUEST_ACCESS_FINE_LOCATION = 1 ;

  if (ContextCompat.checkSelfPermission(MainActivity.this, android.Manifest.permission.ACCESS_FINE_LOCATION)
                != PackageManager.PERMISSION_GRANTED) {
            if (ActivityCompat.shouldShowRequestPermissionRationale(MainActivity.this,
                    android.Manifest.permission.ACCESS_FINE_LOCATION)) {

                // Show an explanation to the user *asynchronously* -- don't block
                // this thread waiting for the user's response! After the user
                // sees the explanation, try again to request the permission.

            } else {

                // No explanation needed, we can request the permission.

                ActivityCompat.requestPermissions(MainActivity.this,
                        new String[]{android.Manifest.permission.ACCESS_FINE_LOCATION},
                        MY_PERMISSIONS_REQUEST_ACCESS_FINE_LOCATION);

            }
        }

http://codepen.io/anon/pen/mWmPJR

滚动时jquery隐藏/显示功能不能始终如一地工作

1 个答案: