jquery - 在滚动条上隐藏顶部标题

Question

我知道有人问过这个问题，但我有一个错误，我找不到错误。

我在导航栏上方有一个顶部标题，当用户向下滚动标题的高度(它是 50 像素)时，我需要隐藏它。当我使用开发人员工具设备工具栏时，它在我的浏览器上工作得很好，但在上传到服务器后我遇到以下错误:当我第一次滚动时，标题被隐藏，但是当我第二次滚动时，它再次显示并且当我第三次滚动时，它完全消失并且有效。可能是什么问题？

$(document).ready(function() {

  //hide the top logo
  var wdwWidth = $(window).width();
  if (wdwWidth <= 768) {
    $(".navbar").css("top", 50);
    var stickyHeaderTop = $('.navbar').offset().top;
    if ($(window).scrollTop() > stickyHeaderTop) {
      $(".navbar").css("top", "0px");
    } else {
      $(".navbar").css("top", "50px");
    }
    $(window).scroll(function() {
      if ($(this).scrollTop() >= stickyHeaderTop) {
        var scroll = $(window).scrollTop();
        var navTop = 50 - scroll;
        if (navTop <= 0) {
          navTop = 0;
        }
        $(".navbar").css("top", navTop);
      } else {
        $(".navbar").css("top", "50px");
      }
    });
  } else {
    $(".navbar").css("top", "0px");
  }
});

html {
  position: relative;
  min-height: 100%;
  height: 900px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased !important;
}

body {
  overflow-x: hidden;
  margin: 0 0 164px;
}



/*******************************
MENU AND HEADER
*******************************/

#header-top-logo {
  display: none;
  height: 50px;
  background-color: rgba(167, 85, 194, 0.9);
  text-align: center;
  position: fixed;
  left: 0;
  width: 105%;
}

.super {
  font-family: Norican;
  font-size: 28px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  text-align: center;
  color: #ffea6a;
}

.hoidjad {
  font-family: LeagueSpartan;
  font-size: 19px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: 0.2px;
  text-align: center;
  color: #ffea6a;
}

.super.logo,
.hoidjad.logo {
  color: rgba(0, 0, 0, 0.8);
}

.navbar-nav>li>a {
  font-family: LeagueSpartan;
  letter-spacing: 0.4px;
  color: rgba(0, 0, 0, 0.8);
  padding-top: 20px;
}

.navbar-nav>.active>a,
.navbar-nav>.active>a:hover {
  text-decoration: none;
  font-weight: bold;
  border-radius: 0px;
  border-bottom-width: 4px;
  border-bottom-style: solid;
  border-bottom-color: #ffea6a;
  color: #000 !important;
  background-color: transparent !important;
}

.search-nanny {
  line-height: 7px !important;
  background-color: #ffea6a;
  width: 175px;
  height: 42px;
  margin-top: 7px;
}

.search-nanny>a:hover,
.search-nanny>a:focus {
  background-color: #ffea6a;
  height: 40px;
}

.nav.navbar-item>li>a.nav-link,
.nav.navbar-item>li>a.nav-link {
  background-color: transparent;
}

.primary.navbar.navbar-item,
.primary.navbar>.navbar-item {
  padding-left: 0;
  padding-right: 0;
  border-radius: 1px;
  background-color: #ffea6a;
  width: 175px;
  height: 42px;
}

.nav.navbar-item>li>a.search-nanny,
.nav.navbar-item>li>a.search-nanny {
  background-color: #ffea6a;
  padding-left: 40px;
}


/* OVERWRITE NAVBAR SO IT WONT COLLAPSE*/

.navbar-collapse.collapse {
  display: block!important;
}

.navbar-nav>li,
.navbar-nav {
  float: left !important;
}

.navbar-right {
  float: right!important;
}

.navbar {
  margin-bottom: 0px;
  min-height: 100px;
  -webkit-transition: top 0.2s ease-out, padding 0s ease-in-out;
  -moz-transition: top 0.2s ease-out, padding 0s ease-in-out;
  transition: top 0.2s ease-out, padding 0s ease-in-out;
}

.navbar-fixed-top {
  padding: 0;
  -webkit-box-shadow: 0 1px 3px 0 rgba(154, 154, 154, 0.5) !important;
  -moz-box-shadow: 0 1px 3px 0 rgba(154, 154, 154, 0.5) !important;
  box-shadow: 0 1px 3px 0 rgba(154, 154, 154, 0.5) !important;
  background-image: none;
  background-color: #fff;
  background-repeat: repeat-x;
  box-shadow: none;
  min-height: 56px;
}

.index-header-right-row {
  width: 75%;
  margin: 0 auto;
}


/************************
FOOTER
************************/

.social-media-icons {
  float: right;
  position: absolute;
  bottom: 60px;
  right: 94px;
}

.footer-text {
  font-family: LeagueSpartan;
  text-align: center;
  padding: 57px 0 28px 0;
}

.footer-text-paragraph {
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  text-align: center;
  color: #dbc5da;
}

.company-name {
  color: #ffea6a;
}

.footer-area {
  background: #af66c8;
  padding-bottom: 20px;
  color: white;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  height: 164px;
  z-index: 999;
}


/*******************************
responsive section starts
*******************************/

@media only screen and (min-width: 321px) {}

@media only screen and (max-width: 991px) {
  .index-header-right-row {
    width: 100%;
    margin: 0 auto;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
  }
  .nav.navbar-item>li>a.search-nanny,
  .nav.navbar-item>li>a.search-nanny {
    background-color: transparent;
    padding-left: 0px;
  }
  .content-area {
    margin-top: 6.5rem;
  }
  .social-media-icons {
    float: right;
    position: absolute;
    bottom: 150px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
  }
  .footer-text {
    padding: 115px 0 35px 0;
  }
  .footer-area {
    height: 230px;
  }
  .collapse.navbar-collapse {
    height: 56px;
  }
  .search-nanny {
    width: 120px;
    background-color: transparent;
    color: #9113bb;
  }
  .navbar-brand {
    display: none;
  }
  .navbar-right {
    display: inline-block;
    float: none !important;
    vertical-align: top;
  }
  .collapse.navbar-collapse {
    text-align: center;
  }
  #header-top-logo {
    display: block;
  }
  .navbar-btn {
    width: 115px;
  }
}

@media screen and (max-width: 768px) {}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {}

@media only screen and (min-width: 1224px) {}

@media only screen and (min-width: 1824px) {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" id="header-top-logo">
  <p><a href="/"><span class="super">super</span> <span class="hoidjad">hoidjad</span></a></p></div>
<nav class="navbar navbar-fixed-top primary navbar">
  <div class="container">
    <div class="col-md-12">
      <!-- Brand and toggle get grouped for better mobile display -->
      <!-- 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 navbar-item">
          <li class="nav-item"><a class="nav-link" href="">Meist</a></li>
          <li class="nav-item"><a class="nav-link" href="">Artiklid</a></li>
          <li class="nav-btn"><a href="#" data-toggle="modal" data-target="#searchNannyModel" class="search-nanny">Otsi hoidjat</a></li>

        </ul>
      </div>
    </div>
  </div>
</nav>

Answer 1

There's a great answer here on Stack Overflow .

基本上是在滚动上添加一个隐藏类，而不是试图在嵌套的 if/else 语句中控制显示隐藏。

这是它使用的代码:

$(function() {
$(window).scroll(function() {
    console.log('scrolling ', $(window).scrollTop(), $(document).height());
    if($(window).scrollTop() >= 200 && $(window).scrollTop() <= ($(document).height() - 500)) {
        $('#btns').removeClass('hide');
    } else {
        $('#btns').addClass('hide');
    }
});

});

The fiddle for the example here .

该函数监视滚动位置，然后在本例中向按钮添加一个类以隐藏它。您想要使用此 jQuery 并反转顺序，以便它在滚动时隐藏而不是相反。

我认为您看到的重复错误也是由于嵌套的 if/else 语句造成的。

编辑:在此处查看更新的 CodePen 有效:http://codepen.io/anon/pen/zZzoKb

我没有使用类，而是简单地在导航元素上使用了 jQuery 的 fadeIn 和 fadeOut 方法。根据需要重新排列代码。