Sticky Button on a div

Question

I have this HTML and CSS code:

<div class="main-div">
    <div class="button">Follow</div>
    <h1>Hello</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>

<style>
    body {
        height: 1000px;
    }

    .main-div {
        position: relative;
        min-height: 200px;
        background-color: red;
        width: 400px;
    }

    .button {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(0%, -50%);
        background-color: blue;
    }
</style>

Is there a way to keep the .button follow the screen while I scroll down and up, but only until the .main-div ends? I can only find code where the button follows the page until the end of the screen.

Answer 1

Include jquery and let me know you want this. Button follow the screen while I scroll down and up, but only until the .main-div ends.

Script:

var button_ = $('.main-div');
   height = button_.outerHeight();


   var previousScroll = 0;

    $(window).scroll(function(){
       var currentScroll = $(this).scrollTop();
       if (currentScroll > previousScroll){

           if(currentScroll>height){
             $('.button').hide();
           }
       } else {
          if(previousScroll<height){
             $('.button').show();
           }
       }

       previousScroll = currentScroll;
    });

css:

  body {
        height: 1000px;
    }

    .main-div {
        position: relative;
        min-height: 200px;
        background-color: red;
        width: 400px;
    }

    .button {
        position: fixed;
        left: 10%;
                transform: translate(0%, -50%);
        background-color: blue;
    }

html:

<div class="main-div">
    <div class="button">Follow</div>
    <h1>Hello</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
    <div id='error'>
    </div>
    </div>

Demo: https://jsfiddle.net/dfzeczbp/2/

Answer 2

Here is a way to do it with vanilla JavaScript so no jQuery or anything else needed. It's just a sample so please note that you will probably need to fiddle with the css and/or javascript to make it work the way you wanted.

 function elementVisibleInViewport(elem, buttonHeight) { var offsetTop = elem.offsetTop; var height = elem.offsetHeight; offsetTop = offsetTop - (buttonHeight * 2); while (elem = elem.offsetParent) { offsetTop += elem.offsetTop; } var maxHeight = offsetTop + height; var elementVisible = (offsetTop<(window.pageYOffset + window.innerHeight)) && (maxHeight >= window.pageYOffset); return elementVisible; } window.addEventListener('scroll', checkVisibility, false); function checkVisibility() { var maindiv = document.getElementById('maindiv'); var button = document.getElementById('button'); var maindivHeight = document.getElementById('maindiv').clientHeight; var buttonHeight = document.getElementById('button').clientHeight; buttonHeight = buttonHeight; if (elementVisibleInViewport(maindiv, buttonHeight)) { button.classList.remove('outofview'); button.removeAttribute('style'); } else { button.classList.add('outofview'); button.setAttribute('style', 'top:'+(maindiv.offsetHeight - buttonHeight)+'px;'); } } 

 body { height: 1000px; margin: 0; } .main-div { position: relative; min-height: 200px; background-color: red; width: 100%; } .button { position: fixed; top: 20px; right: 0; background-color: blue; } .button.outofview { position: absolute; right: 0; } 

 <div id="maindiv" class="main-div"> <div id="button" class="button">Follow</div> <h1>Hello</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> </div>