如何在滚动上隐藏自定义标题？

Question

我的bootstrap 4 navbar顶部有一个自定义标题，我想在滚动时隐藏，当用户滚动回顶部然后再次显示时。在我滚动的那一刻，它会在移动设备上产生一个错误：当向下滚动时，它会“跳转”到顶部。有什么方法可以让过渡平滑，以便它在顶部标题的顶部“滑动”？

编辑：

按要求提供小提琴：https://jsfiddle.net/oyb1cohd/2/

当我滚动它时会创建这个空间：

我的HTML：

<div class="row" id="header-top-logo"><p><span class="">Our</span> <span class="">Logo</span></p></div>
  <nav class="navbar navbar-fixed-top navbar-light bg-faded">
          <div class="container">
          <div class="col-md-12">
              <!-- Brand and toggle get grouped for better mobile display -->
                  <a class="navbar-brand" class="pull-left" href="home"><span class="super logo">our</span> <span class="logo">logo</span></a>
              <!-- 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">

                      <li class="nav-item"><a class="nav-link" href="/about">About</a></li>
                      <li class="nav-item"><a class="nav-link" href="/artiklid.php">Blog</a></li>
                      <li class="nav-item"><a href="/otsi" class="nav-link btn navbar-btn search-nanny">Search</a></li>

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

然后我尝试创建脚本，获取屏幕宽度，然后在徽标顶部滚动导航栏：

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

    });
}

Answer 1

试试这个：

这里是fiddle

以及这里的代码。我所做的更改位于#header-top-logo和.navbar。

＆＃13;

＆＃13;

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

        });
    }

＆＃13;

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


.btn {
    border: none;
}


/*******************************
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:100%;
}

.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-brand {
    padding-top: 0.5rem;
}

.navbar-light .navbar-nav .nav-link {
    margin-top: 9px;
    font-family: LeagueSpartan;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 30px;
    letter-spacing: 0.4px;
    text-align: center;
    color: rgba(0, 0, 0, 0.8);
}

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

.navbar-nav>li>a {
    border-radius: 0px;
}

.navbar-nav .nav-item+.nav-item {
    margin-left: 2rem;
}

.navbar .navbar-nav>li>a:hover, .navbar .navbar-nav>li>a:focus {
    text-decoration: none;
    background-image: linear-gradient(transparent 20px, #ffea6a 10px);
    height: 30px;
    width: 100%;
}

.navbar .navbar-nav>li>a.btn:hover, .navbar .navbar-nav>li>a.btn:focus {
    padding-left: 0;
    padding-right: 0;
    border-radius: 1px;
    background-color: #ffea6a;
    width: 175px;
    height: 42px;
}

.navbar .navbar-nav>.nav-item>a.nav-link.active-tab, .navbar .navbar-nav>.nav-item>a.nav-link.active-tab:hover, .navbar .navbar-nav>.nav-item>a.nav-link.active-tab:focus, .navbar .navbar-nav>.nav-item>a.nav-link.active-tab::after {
    background-image: linear-gradient(transparent 20px, #ffea6a 10px);
    height: 30px;
    width: 100%;
}

.navbar-nav .nav-item+.nav-item {
    position: relative;
}

.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
    text-decoration: none;
}

.navbar-fixed-top .navbar-nav>li>a:hover:after {
    width: 100%;
}

.nav-button {
    background-color: #c2c2c2;
    border: medium none;
    color: #fff;
    font-size: 16px;
    padding: 8px 20px;
    border-radius: 2px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.nav-button.login {
    background-color: #00AEEF;
    margin-right: 5px;
}


/* OVERWRITE NAVBAR SO IT WONT COLLAPSE*/

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

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

.navbar-right {
    margin-right: 1px;
    float: right!important;
    position: relative;
}


/* OVERWRITE NAVBAR SO IT WONT COLLAPSE*/

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



.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
    color: #fff;
    background-color: transparent;
}



/*BUTTONS*/

#joinBtn {
    margin-top: 15px;
    margin-bottom: 15px;
}

.searchButtons {
    margin-top: 20px;
}

.main-nav.nav.navbar-nav.navbar-right {
    display: inline-block;
    float: none;
    vertical-align: top;
}

.collapse.navbar-collapse {
    text-align: center;
}

.content-area {
    margin-top: 56px;
}


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

bb @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {}

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

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

@media screen and (max-width: 768px) {
    .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;
    }
    .btn.navbar-btn.search-nanny {
        width: 85px;
        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 only screen and (max-width: 991px) {}

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>

<div class="row" id="header-top-logo"><p><span class="super">our</span> <span class="hoidjad">logo</span></p></div>
      <nav class="navbar navbar-fixed-top navbar-light bg-faded">
              <div class="container">
              <div class="col-md-12">
                  <!-- Brand and toggle get grouped for better mobile display -->
                      <a class="navbar-brand" class="pull-left" href="esileht"><span class="super logo">ou</span> <span class="hoidjad logo">logo</span></a>
                  <!-- 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">
                          <!--<li class="nav-item"><a class="nav-link" href="/login">Sisene</a></li>
                          <li class="nav-item"><a class="nav-link" href="/signup/family">Registreeri&nbsp</a></li>-->
                          <li class="nav-item"><a class="nav-link" href="/about">About</a></li>
                          <li class="nav-item"><a class="nav-link" href="/artiklid.php">Blog</a></li>
                          <li class="nav-item"><a href="/otsi" class="nav-link btn navbar-btn search-nanny">Search</a></li>

                      </ul>
                  </div><!-- /.navbar-collapse -->
                  </div><!-- /.container-fluid -->
              </div><!-- /.container-fluid -->
          </nav>

＆＃13;

＆＃13;

＆＃13;