滚动到某个点后垂直定位DIV

Question

我正在尝试为博客文章制作垂直社交分享按钮。

我希望在滚动到某个位置后固定“share_DIV”位置 某一点。

• 因为“Share_DIV”不应该出现在标题区域，它的 位置将是绝对的，并由 jQuery 计算以使其低于 *the header* 和 *the title*，那么当您向下滚动并到达正文时，“share_DIV”应该开始与您同行，同时向下滚动到正文的末尾。

所以 share_DIV 应该在滚动事件上垂直移动，仅在 START POINT -> END POINT

之间

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

Fiddle Example 会准确解释我需要什么。

我怎样才能用 jQuery 完成它？

Answer 1

也许这就是你想要的：Fiddle

基本上，您需要通过使用来捕获scroll event

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

然后检查当前scroll position是否大于.content的position，且不大于.content添加的height位置

这是有关如何执行此操作的完整代码：

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

Answer 2

这里是：

http://jsfiddle.net/h5t7pgfb/76/

CSS：

.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;
    }

jquery：

var totalHeight = $(".header").height()+$(".title").height() + 25;
        $(".vertical-container").css('top', totalHeight + "px");

        var stickyTop = $('.vertical-container').offset().top; // returns number 

        $(window).scroll(function(){ // scroll event  
            var windowTop = $(window).scrollTop(); // returns number

            if (stickyTop < windowTop) {
              $('.vertical-container').css({ position: 'fixed', top: 0 });
            }
            else {
              $('.vertical-container').css({position: 'absolute', top: totalHeight });
            }
        });