仅在一个 div 顶部的粘性部分答案

【问题标题】：sticky section at top of one div only仅在一个 div 顶部的粘性部分
【发布时间】：2017-02-26 09:04:26
【问题描述】：

我只想在主要内容的顶部显示粘性页眉 - 即，一旦页脚 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>

如何更改 > 100 的值以改为查找 div 容器？

【问题讨论】：

标签： jquery html css

【解决方案1】：

在 Css 和 Jquery 2.1.1

中添加 sticky 类

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

现场演示 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>

【讨论】：

【解决方案2】：

您实际上想要做的是检查窗口的scrollTop() 减去footer 的位置。

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

【讨论】：

虽然这并没有按计划工作，但我认为这个概念很接近：所以要显示粘性标题，我需要检查滚动顶部位置 = 主要内容 div 并隐藏粘性以检查滚动顶部位置 = 页脚提示
你能解释一下究竟是什么没有按计划工作吗？我需要了解问题才能帮助修复:)

【解决方案3】：

这可能会给你一些想法，

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

【讨论】：