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