Question

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

如何更改＆gt;改为寻找div容器的100值？

Answer 1

在Css＆amp;中添加sticky类 Jquery 2.1.1

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

现场演示 Here

代码段示例

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

只有一个div顶部的粘性部分

3 个答案: