1つのdivの上部にあるスティッキーセクション

スティッキーヘッダーをメインコンテンツの上部にのみ表示したいとします。つまり、フッターdivの上部がウィンドウの上部に達すると、スティッキーセクションが非表示になります。1つのdivの上部にあるスティッキーセクション

<body> 
    <p>&nbsp;</p> 
<p>&nbsp;</p> 
    <p>CONTENT BEFORE STICKY SECTION</p> 
    <p>&nbsp;</p> 
<p>&nbsp;</p> 
<!-- our markup --> 
<header> 
<h1>Sticky Section</h1></header> 

    <div class="content" style="background-color:#7BD2D5; height:1000px; padding:200px 20px;"> <!-- this is the area id like to display the sticky section at the top of the page only--> 
MAIN CONTENT - SHOW STICKY BAR WHEN THIS SECTION IS IN VIEW 

</div> 

<div class="fonnter" style="line-height:1000px; padding-top:400px;"><!-- Remove sticky section once scrolled to footer content--> 

    <p>FOOTER CONTENT - Hide sticky section at the top of the page</p> 

</div> 

<script> 
$(window).scroll(function() { 
    if ($(this).scrollTop() > 100){ 
     $('header').addClass("sticky"); 
    } 
    else{ 
     $('header').removeClass("sticky"); 
    } 
}); 
</script>

代わりにdivコンテナを探すために> 100の値を変更できますか？

出典

2016-10-17 Mike

ライブデモ& のjQuery 2.1.1

.sticky 
{ 
    position: fixed; 
    top: 0; 
}

CSSでstickyクラスの追加Here

スニペット例

$(window).scroll(function() { 
 
    if ($(this).scrollTop() > 100){ 
 
     $('header').addClass("sticky"); 
 
    } 
 
    else{ 
 
     $('header').removeClass("sticky"); 
 
    } 
 
});

.sticky 
 
{ 
 
position: fixed; 
 
    top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <p>&nbsp;</p> 
 
<p>&nbsp;</p> 
 
    <p>CONTENT BEFORE STICKY SECTION</p> 
 
    <p>&nbsp;</p> 
 
<p>&nbsp;</p> 
 
<!-- our markup --> 
 
<header> 
 
<h1>Sticky Section</h1></header> 
 

 
    <div class="content" style="background-color:#7BD2D5; height:1000px; padding:200px 20px;"> <!-- this is the area id like to display the sticky section at the top of the page only--> 
 
MAIN CONTENT - SHOW STICKY BAR WHEN THIS SECTION IS IN VIEW 
 

 
</div> 
 

 
<div class="fonnter" style="line-height:1000px; padding-top:400px;"><!-- Remove sticky section once scrolled to footer content--> 
 

 
    <p>FOOTER CONTENT - Hide sticky section at the top of the page</p> 
 

 
</div>

出典

2016-10-17 11:46:04

は、あなたが実際にしたいが、やっていることは、ウィンドウマイナスfooterの位置のscrollTop()を確認しています。

しかし

$(this).scrollTop() - $('.footer').position().top

は - あなたの要素が（私はあなたが本当に必要なのでわからない）line-height:1000px; padding-top:400px;を持っていることに注意してください。

私は（例では）その要素に境界線を追加しましたので、何が起こるまさに見ることができます。

$(window).scroll(function() { 
 
    if ($(this).scrollTop() - $('.footer').position().top > 0){ 
 
    $('header').removeClass("sticky"); 
 
    } else{ 
 
    $('header').addClass("sticky"); 
 
    } 
 
});

header { 
 
    display: none; 
 
} 
 
.sticky { 
 
    display: block; 
 
    position: fixed; 
 
    top: 0; 
 
} 
 
.footer { 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>&nbsp;</p> 
 
<p>&nbsp;</p> 
 
<p>CONTENT BEFORE STICKY SECTION</p> 
 
<p>&nbsp;</p> 
 
<p>&nbsp;</p> 
 
<!-- our markup --> 
 
<header class="sticky"> 
 
    <h1>Sticky Section</h1></header> 
 

 
<div class="content" style="background-color:#7BD2D5; height:1000px; padding:200px 20px;"> <!-- this is the area id like to display the sticky section at the top of the page only--> 
 
    MAIN CONTENT - SHOW STICKY BAR WHEN THIS SECTION IS IN VIEW 
 

 
</div> 
 

 
<div class="footer" style="line-height:1000px; padding-top:400px;"><!-- Remove sticky section once scrolled to footer content--> 
 

 
    <p>FOOTER CONTENT - Hide sticky section at the top of the page</p> 
 

 
</div>

出典

2016-10-17 11:46:22 Dekel

もののこれは計画どおりには機能しませんが、コンセプトは近いと思います。スティッキーヘッダーを表示するには、スクロールトップの位置=メインのコンテンツdivを確認し、 k scrolltop position = footer tip – Mike

計画どおりにうまくいかないことを説明できますか？私は修正を支援するために問題を理解する必要があります:) – Dekel

これはあなたにいくつかのアイデアを与えるかもしれない、

<script> 
    $(window).scroll(function() { 
     var offsetHeight = $('header').offset(); 
     if ($(this).scrollTop() > offsetHeight.top){ 
      $('header').addClass("sticky"); //dynamicall stick header according to the header height 
     } 
     else{ 
      $('header').removeClass("sticky"); 
     } 

    //As soon as footer, reaches window top, remove sticky header. 

     var footerOffset = $('#footer').offset(); 
     if (footerOffset.top == 0){ 
      $('header').removeClass("sticky"); //dynamicall stick header according to the header height 
     } 
     else{ 
      $('header').removeClass("sticky"); 
     } 

    }); 
</script>

出典

2016-10-17 11:47:10 Samir

1つのdivの上部にあるスティッキーセクション

答えて

関連する問題