1. ホーム
  2. 質問と答え
  3. スクロールの上部ヘッダーを隠す

スクロールの上部ヘッダーを隠す

2017-03-13 9 views
0

この質問は尋ねられましたが、私はバグがあり、間違いを見つけることができません。スクロールの上部ヘッダーを隠す

私はnavbarの上にトップヘッダーがあり、ユーザーがヘッダーの高さをスクロールすると（50pxです）、それを隠す必要があります。デベロッパーツールのデバイスツールバーを使用するとブラウザで問題なく動作しますが、サーバーにアップロードした後、次のバグがあります。最初にスクロールするとヘッダーは非表示になりますが、2回目にスクロールすると再び表示されます3回目にスクロールすると、完全に消えて動作します。何が問題なの？

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

出典

2017-03-13 raqulka

+0

あなたが上がらないときcondicionalをしないのはなぜ」ドキュメントを準備していますが、いくつかのjQueryを使用しています。あなたのページでjQueryを実行していますか？ –

+0

テンプレートのものを取り除いてスニペットを修正し、実際のHTMLとCSSに置き換えてください。 – mplungjan

+0

@ NathanielFlick私はドキュメントを準備中です – raqulka

答えて

1

There's a great answer here on Stack Overflow。

ネストされたif/elseステートメントでshow hideを制御しようとするのではなく、スクロールに基本的に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ステートメントによるものだと思います。

EDIT：http://codepen.io/anon/pen/zZzoKb

をする代わりに、私は単にのnav要素にjQueryのフェードインとフェードアウトメソッドを使用するクラスを使用する：働くことにここで更新CodePenを参照してください。あなたが合っているかのようにコードを並べ替えます。

出典

2017-03-13 10:46:18

+0

これは小さなフェード効果 – raqulka

+0

コデペン、1秒。 –

+0

私が質問したところでは、私のソリューションはブラウザでうまく動作しますが、モバイルでは迷惑になります。 – raqulka

-1

、非常に短いコードで無料のバグが< =は50px scrollTopスプライト$。（。ナビゲーションバー）.SHOWときscrollTopスプライト> = 50 $は（ナビゲーションバー）.hideと

出典

2017-03-13 10:50:40

+0

コードブロックにコードを書き込む –

関連する問題

 関連する問題