Positioning DIV vertically after scrolling to a ce

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.

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

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

share_DIV has class .vertical-container in fiddle code.

Fiddle Example will explain exactly what I need.

How can I get it done with jQuery?

Answer 1

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>

Answer 2

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