Positioning DIV vertically after scrolling to a certain point

Question

I\'m trying to make a vertical social share buttons for a blog post.

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

Answer 1

Here it is:

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

Answer 2

Perhaps this is what you want: Fiddle

Basically, you need to catch the scroll event by using

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

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>