Question

所以我没有找到与此相关的任何内容，只是点击按钮向下滚动到页面底部，但我已经知道了。

我的问题是：

我有一个探索按钮＆＃39;在幻灯片上显示当你点击它时页面向下滚动，事实是，在某些屏幕中，幻灯片显示大于窗口的大小，所以你不能看到按钮，除非你向下滚动（因此没有指向按钮）。我通过添加：

来修复它

    $(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似乎无法在那里工作！

Answer 1

这是一个糟糕的例子，但它可能会给你一些东西。按钮的错误定位与此有关：

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 Demo

Answer 2

当与其他答案结合使用时，您可以使用节流形式和animate()方法。

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

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

jsFiddle Demo

资源：

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/（见底部评论）

按钮粘贴到页面底部jQuery

2 个答案: