滚动到某个点后垂直定位DIV [英] Positioning DIV vertically after scrolling to a certain point

问题描述

我想在滚动到$ b后固定share_DIV位置

I want the "share_DIV" position to be fixed after scrolling to a certain point.

• 因为Share_DIV不应出现在标题区域，其
  位置将是绝对的并通过 jQuery 计算，让它在
  *下的头* 和 * title * code>，那么当您向下滚动并到达文本正文时，share_DIV应开始与您一起行走，同时向下滚动到文本正文的末尾。



• because the "Share_DIV" is not supposed to appear on header area, its position will be absolute and calculated by jQuery to let it be under *the header* and *the title*, then when you scroll down and reach the text body "share_DIV" should start walking with you while scrolling down to the end of the text body.

因此， share_DIV 应在滚动事件上垂直移动，只能在START POINT - > END POINT之间移动。

So the share_DIV should move vertically on the scroll event, only between START POINT -> END POINT

share_DIV在小提示代码中有 .vertical-container 类。

小提示示例将详细解释我需要什么。

Fiddle Example will explain exactly what I need.

如何使用jQuery完成它？

How can I get it done with jQuery?

推荐答案

也许这是你想要的：小提琴

基本上，你需要捕捉使用

Basically, you need to catch the scroll event by using

$(window).on("scroll", function() { ... });

然后检查当前滚动位置大于 的 .content ，且不大于 .content height 添加的位置

Then check whether the current scroll position is greater than the position of .content, and not greater than the .content position added by it's height

这是关于如何做的完整代码：

Here's the full code on how to do it:

$(function() {
  var top = $(".content").offset().top;
  var btm = top + $(".content").outerHeight(true);
  var $shareContainer = $(".vertical-container");
  var shareHeight = $shareContainer.outerHeight();
  $shareContainer.css('top', top + "px");

  $(window).on("scroll", function() {
    //console.log($(this).scrollTop());
    var scrollPosition = $(this).scrollTop();
    if (scrollPosition > top && scrollPosition + shareHeight < btm) {
      $shareContainer.css('top', scrollPosition + "px");
    } else if (scrollPosition < top) {
      $shareContainer.css('top', top + "px");
    } else {
      $shareContainer.css('top', btm - shareHeight + "px");
    }
  });
});

html {
  margin: 0 49px;
}
.header {
  height: 200px;
  background: url(http://www.custom-web-design.ca/custom-web-design.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.panel {
  border-radius: 4px;
  border: 1px solid gray;
  height: 1000px;
  width: 100%;
}
p {
  margin: 0;
  font-weight: bold;
  border-bottom: 1px solid red;
}
.title {
  background-color: cyan;
  height: 60px;
  text-align: center;
  padding-top: 15px;
}
.content {
  padding: 15px 60px 15px 15px;
}
.vertical-container {
  color: white;
  font-size: 14px;
  position: absolute;
  right: 45px;
  top: 15px;
  min-height: 200px;
  background-color: #3B5998;
  width: 60px;
}
.vertical-container:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  top: 100%;
  border-style: solid;
  border-width: 5px 5px;
  right: 0px;
  border-color: #23355B transparent transparent #23355B;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="header">

</div>
<div class="panel">
  <div class="title">SOME TITLE</div>
  <div class="content">
    <p>START POINT</p>
    Performed suspicion in certainty so frankness by attention pretended. Newspaper or in tolerably education enjoyment. Extremity excellent certainty discourse sincerity no he so resembled. Joy house worse arise total boy but. Elderly up chicken do at feeling
    is. Like seen drew no make fond at on rent. Behaviour extremely her explained situation yet september gentleman are who. Is thought or pointed hearing he. Rendered her for put improved concerns his. Ladies bed wisdom theirs mrs men months set. Everything
    so dispatched as it increasing pianoforte. Hearing now saw perhaps minutes herself his. Of instantly excellent therefore difficult he northward. Joy green but least marry rapid quiet but. Way devonshire introduced expression saw travelling affronting.
    Her and effects affixed pretend account ten natural. Need eat week even yet that. Incommode delighted he resolving sportsmen do in listening.
    <p>END POINT</p>
  </div>
  <div class="vertical-container">SHARE container</div>
</div>

这篇关于滚动到某个点后垂直定位DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！