在滚动上隐藏顶部标题

时间：2017-03-13 10:33:18

标签： jquery css

我知道这个问题已被问到，但我遇到了一个错误，我找不到错误。

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

＆＃13;
＆＃13; 
$(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");
  }
});
＆＃13; 
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) {}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

There's a great answer here on Stack Overflow

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

以下是它使用的代码：

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

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

答案 1 :(得分：-1)

为什么不在scrollTop＆gt; = 50 $（。navbar）.hide和当＆lt; = 50px scrollTop $。（。navbar）.show时做一个condicional，代码很短且免费错误

相关问题
最新问题