按钮粘在页面jQuery的底部

Button sticks to bottom of page jQuery

本文关键字：jQuery 底部 按钮      更新时间：2023-09-26

所以我没有找到与此相关的任何内容，只是在单击时使按钮向下滚动到页面底部，但我已经得到了这个。

我的问题是：

我在幻灯片顶部有一个"浏览按钮"，当您单击它时，页面会向下滚动，问题是，在某些屏幕中，幻灯片比窗口的大小大，因此除非您向下滚动，否则您无法看到该按钮（因此没有意义拥有按钮）。我通过添加以下内容来修复它：

    $(document).ready(function() {
    var slideHeight = $('.item').height();
    var headerHeight = $('header').height();
    var windowHeight = $(window).height();
    $('.exploreImage').css('bottom', (Math.max(headerHeight + slideHeight, windowHeight) - windowHeight) + 20 + "px");
    });

但是现在当我向下滚动时，我希望按钮向下滚动并保持在窗口底部（直到一定高度，即幻灯片放映的结尾）。

到目前为止，我有类似的东西，即： 

    $(window).on('scroll', function() {
    $('.exploreImage').css('bottom', 0 + "px");
    });

但是这会在滚动时将按钮放在幻灯片放映的底部，而不是我想要的窗口底部！

注意：我需要用jQuery完成这个。

谢谢你们的帮助！

编辑：小提琴：https://jsfiddle.net/1fr27eLu/7/但jQuery似乎在那里不起作用！

当与其他答案结合使用时，您可以使用一种形式的油门以及animate()方法。

我还没有做到完美，但希望你会看到它的价值。

$(window).scroll( $.throttle( 250, btnScroll ) );

jsFiddle 演示

资源：

http://benalman.com/projects/jquery-throttle-debounce-plugin/

https://css-tricks.com/the-difference-between-throttling-and-debouncing/

http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/（见底部评论）

这是一个糟糕的例子，但它可能会给你一些开始。按钮定位不正确与此有关：

https://api.jquery.com/scrollTop/

垂直滚动位置与在可滚动区域上方的视图中隐藏的像素数相同。如果滚动条位于最顶部，或者元素不可滚动，则此数字将为 0。

无论如何，以下是可能使您步入正轨的示例代码：

var screenWidth  = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); //Max of page size vs window size, or zero
var screenHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
screenHeight = screenHeight - 100; //correct for jsFiddle
var st, btnFixed=false, bd = $('#btnDIV');
$(window).scroll(function(){
  st = $(window).scrollTop();
  $('#rpt').html( st +'/'+ screenHeight); //DEV
  if (st < screenHeight && !btnFixed){
    bd.css({'top':st*1.3});
  }else{
    bd.css({'top': screenHeight+'px'});
    btnFixed = true
  }
  if (st < screenHeight && btnFixed){
    bd.css({'top':st*1.3});
    btnFixed = true
  }
});
html,body{
  100%;
}
div{
  position:relative;
}
#wrap{
  height:2000px;
}
#btnDIV{
  position:fixed;
  top:0;
  left:0;
  background:red;
  overflow:hidden;
  z-index:2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btnDIV"><button class="exploreImage">Explore</button></div>
<div id="rpt"></div>
<div id="wrap"></div>

#rpt{position:fixed;top:0;right:0;height:40px;width:100px;background:wheat;}

jsFiddle 演示

相关文章：