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

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

$(document).ready(function(){
    var i=1;
  $(document).on('contextmenu', '.div1', function(e){

    $('.msg').text('right clicked '+i+' times');
    i++;
    return false;
  });
});

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上的粘滞按钮

2 个答案: