div上的粘滞按钮

Question

我有以下HTML和CSS代码：

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

当我上下滚动时，是否有办法使.button跟随屏幕，但只能直到.main-div结束？ 我只能在按钮跟随页面直到屏幕结束的地方找到代码。

Answer 1

包括jQuery，让我知道您想要这个。 当我上下滚动时，按钮会跟随屏幕，但是直到.main-div结束为止。

脚本：

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>

演示： https : //jsfiddle.net/dfzeczbp/2/

Answer 2

这是使用原始JavaScript的一种方法，因此不需要jQuery或其他任何东西。 这只是一个示例，因此请注意，您可能需要弄弄css和/或javascript才能使其按您想要的方式工作。

 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>