如何在滾動上隱藏自定義標題？

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。

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

 
     }); 
 
    }

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) {}

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