滚动后如何将div保持在屏幕底部

Question

我有一个接触按钮，位于屏幕上2个内容项之间的可见部分内。用户向下滚动后，我希望将按钮固定在屏幕的底部，以便始终可以看到它。

var pos = $('#test').scrollTop();
if (pos > 200) $('#test').addclass('fixed')
console.log(pos)

.fixed {
  bottom: 0px;
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: red;
}

#test {
  background-color: red;
}

#content {
  height: 100px;
  background: green;
}

#content2 {
  height: 1000px;
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="content"></div>
<div id="test">button</div>
<div id="content2"></div>

问题是要知道何时隐藏按钮才能添加固定功能。

这怎么办？

Answer 1

您可以使用.offsetTop进行操作。因此添加它，它将使用您的类fixed来完成您需要的工作。

var fixButton = document.getElementById("test");
var sticky = fixButton.offsetTop;

window.onscroll = function() {
  if (window.pageYOffset > sticky) {
    fixButton.classList.add("fixed");
  } else {
    fixButton.classList.remove("fixed");
  }
}

Fiddle

Answer 2

Bro您想要这个吗？检查一下，我已经解决了

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 190) {
        $("#test").addClass("fixed-btn");
    }
    if (scroll <= 190) {
        $("#test").removeClass("fixed-btn");
    }
});

.fixed {
  bottom: 0px;
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: red;
}

#test {
  background-color: red;
}

#content {
  height: 100px;
  background: green;
}

#content2 {
  height: 1000px;
  background: blue;
}
.fixed-btn {
    position: fixed;
    width: 100%;
    top: 0px;
    }
    body {
    margin: 0;
   }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="content"></div>
<div id="test">button</div>
<div id="content2"></div>

Answer 3

例如，您可以通过window元素上的jQuery滚动功能来监听用户滚动。将对象的偏移量和高度保存在document.ready上，并且两个添加的值均<= pageY窗口的偏移量时，它们将不可见。

$(document).ready(function() {
  const btnOffsetTop = $('#test')[0].offsetTop;
  const btnHeight = $('#test')[0].scrollHeight;

  $(window).scroll(function() {
   if(btnOffsetTop + btnHeight 
    <= window.pageYOffset){
  $('#test').addClass('fixed');
   }else{
    $('#test').removeClass('fixed');
   }
  });
});

.fixed {
  bottom: 0px;
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: red;
}

#test {
  background-color: red;
}

#content {
  height: 100px;
  background: green;
}

#content2 {
  height: 1000px;
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="content"></div>
<div id="test">button</div>
<div id="content2"></div>