divに到達したときに一番上に固定された要素を停止

2つのナビゲーションバーがあるページがあります。最初のページはページの上部に固定されています。ページの中央にある2番目のページは、スクロールすると「トップ・スティッキー」になります。divに到達したときに一番上に固定された要素を停止

第2ナビに入る直前に第1ナビを停止したいと思います。 2番目のナビゲーションバーをスクロールすると、このナビゲーションバーのみが表示され、1番目は上/消えたままになります。ここで

がある Fiddle

私のhtml：

<body> 
<div id="page"> 
    <div class="fullscreen"> 
    <h1>Zone fullscreen</h1> 
    </div> 
    <header class="navbar1"> 
    <p>Navbar 1 : I am fixed but I want to stop just before Navbar2 !</p> 
    </header> 
    <div id="content"> 
    <div class="navbar2"> 
    <p>Navbar 2 : I become sticky on scroll</p> 
    </div><!--/navbarLoc--> 
    <div class="main-content"> 
    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p> 
    </div><!--/content --> 
</div><!--/page--> 
</body>

CSS：

* {padding:0; margin:0;} 
html, body, #page {height:100%;} 

.fullscreen {height: 100%;background: red;position:relative; z-index:5;} 
.fullscreen h1 {padding-top:180px;text-align:center;} 

.navbar1 {position: fixed; left: 0; right: 0; top:10px;background:yellow;padding:5px;z-index:15;} 
.navbar2 {background:green;padding:5px;z-index:20;} 

.main-content {padding:10px;position:relative; z-index:10;} 
.main-content p {font-size:50px;}

そして、JS：これはNavbar2はスティッキー作るためである

：

$(".navbar2").stick_in_parent({offset_top:40});

そして私は、このコードの一部、Navbar2に到達したときnavbar1は絶対にする、doesntの仕事が見つかりました：

function checkOffset() { 
    if($('.navbar1').offset().top + $('.navbar1').height() >=  $('.navbar2').offset().top - 10) 
     $('.navbar1').css('position', 'absolute'); 
    if($(document).scrollTop() + window.innerHeight < $('.navbar2').offset().top) 
    $('.navbar1').css('position', 'fixed'); // restore when you scroll up 
    $('.navbar1').text($(document).scrollTop() + window.innerHeight); 
} 
$(document).scroll(function() { 
    checkOffset(); 
});

をそしておそらく最良の解決策ではなく、直接CSSを適用するクラスを追加/削除するだろうか？

ご返信いただきありがとうございます！

出典

2016-10-27 imudo

あなたはnavbar1がnavbar2するには、ユーザーのスクロールまで固定することにしますか、そしてnavbar2は固定1になりますか？右@imudo –

はい、それはまさにそれです！ – imudo

[OK]を、最初に私は私はあなたがnavbar1のヘッダを使っている理由は、私はよく分からない

あなたと共有したいいくつかの注意をしましたので、私はちょうどそれが
以下のコードを確認してくださいあなたは、これらすべての表示、位置、およびzインデックス属性への必要性をあまり役に立たないCSSを使用していないしているので、私は、不要なスタイルに

を取り出し、あなたが必要なものに行うことになっています。

$(document).ready(function(){ 
 
    $(".navbar1").addClass("fixedbar"); 
 
    $(".navbar2").removeClass("fixedbar"); 
 
    
 
    var bar2pos=$('.navbar2').offset().top - $('.navbar2').outerHeight(); 
 
    
 
    $(document).on('scroll', function() { 
 
    
 
    if($(this).scrollTop()>= bar2pos && !$(".navbar2").hasClass("fixedbar")){ 
 
     $(".navbar1").removeClass("fixedbar"); 
 
     $(".navbar2").addClass("fixedbar"); 
 
    } 
 
    
 
    if($(this).scrollTop()<=bar2pos && $(".navbar2").hasClass("fixedbar")){ 
 
     $(".navbar1").addClass("fixedbar"); 
 
     $(".navbar2").removeClass("fixedbar"); 
 
    } 
 
    }); 
 
    
 
});

* {padding:0; margin:0;} 
 
html, body, #page {height:100%;} 
 

 
.fullscreen {background: red;} 
 
.fullscreen h1 {padding-top:180px;text-align:center;} 
 

 
.navbar1 {background:yellow; padding:5px; width:100%;} 
 
.navbar2 {background:green; padding:5px; width:100%;} 
 

 
.main-content {padding:10px;} 
 
.main-content p {font-size:50px;} 
 

 
.fixedbar 
 
{ 
 
    position: fixed; 
 
    left: 0px; 
 
    top : 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<body> 
 
<div id="page"> 
 
    <div class="navbar1"> 
 
    <p>Navbar 1 : I am fixed but I want to stop just before Navbar2 !</p> 
 
    </div> \t 
 
    <div class="fullscreen"> 
 
    <h1>Zone fullscreen</h1> 
 
\t </div> 
 
    
 
    <div class="navbar2"> 
 
    <p>Navbar 2 : I become sticky on scroll</p> 
 
\t </div><!--/navbarLoc--> 
 
    <div id="content"> 
 
    
 
    <div class="main-content"> 
 
    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p> 
 
    </div><!--/content --> 
 
</div><!--/page--> 
 
</body>

出典

2016-10-27 15:49:38

ご協力ありがとうございます、これはとてもいいです。質問：アンカーポイントの距離（前後）を設定できますか？つまり、クラスの固定バーは、2つのナビゲーションバーが互いに接触したときに追加/削除されるようになりました。たとえば、「navbar1 touch navbar2の前にfixedbar 10 pxを追加/削除する」と言うことができますか？ – imudo

@imudo、はい、あなたはnavbar2を固定バーにする前に距離を簡単に操作できます。はに更新できます。var bar2pos = $（ '。navbar2'）。offset（）。top - $（ '。navbar2'）。outerHeight（） - 10; これはnavbar2の開始前にnavbar1が10pxのときにnavbar2を固定小棒に変更します –

divに到達したときに一番上に固定された要素を停止

答えて

関連する問題