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

Question

我正在尝试为博客帖子制作一个垂直的社交分享按钮。

我想在滚动到a后修复“share_DIV”位置    某点。

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

所以 share_DIV 应该在滚动事件上垂直移动，仅在START POINT - ＆gt;之间。结束点

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

Fiddle Example将准确解释我的需求。

如何使用jQuery完成它？

Answer 1

也许这就是你想要的：Fiddle

基本上，您需要使用

捕获scroll event

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

然后检查当前scroll position是否大于position的{​​{1}}，并且不会超过.content .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;
}

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