Sticky-Taste auf einem div

Question

Ich habe diesen HTML und 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> 

Gibt es eine Möglichkeit die .button folgen dem Bildschirm zu halten, während ich nach unten scrollen und nach oben, aber nur, bis die .main-div Enden? Ich kann nur Code finden, wo die Schaltfläche der Seite bis zum Ende des Bildschirms folgt.

Answer 1

Fügen Sie jquery hinzu und lassen Sie mich wissen, dass Sie das wollen. Button folge dem Bildschirm, während ich nach unten und oben scrolle, aber nur bis der .main-div endet.

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

Hier ist ein Weg, um es mit Vanilla JavaScript zu tun, so dass keine jQuery oder irgendetwas anderes benötigt wird. Es ist nur ein Beispiel, also bitte beachten Sie, dass Sie wahrscheinlich mit CSS und/oder Javascript herumspielen müssen, damit es so funktioniert, wie Sie es wollten.

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>