【问题标题】:Stop DIV scrolling once it reaches the footer (another DIV)到达页脚后停止 DIV 滚动(另一个 DIV)
【发布时间】:2013-10-26 10:51:43
【问题描述】:

当用户向下滚动页面时,我有一个“返回顶部”按钮。
在一些帮助下,我设法在下面的代码中实现了这些功能: 淡入在向下滚动后的某个点,动画滚动回到顶部并动画滚动到页面的所有 href="#" 链接。

    $('a[href^="#"]').on('click',function (e) {
    e.preventDefault();

    var target = this.hash,
    $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 800, 'swing', function () {
        window.location.hash = target;
    });
});

var $win = $(window);

$win.scroll(function () {

    if ($win.scrollTop() > 300) {
        b.fadeIn();
        console.log("fadding in")
    } 
    else {
        b.fadeOut();
    }
  });

});

这是一个工作示例:http://jsfiddle.net/q8DUC/8/

我的问题是按钮滚动到页面的页脚... 基本上,“回到顶部”应该在“页脚”DIV 上方 30 像素处停止。 但我找不到实现这一目标的方法。我环顾四周,但没有发现任何适用于现有代码的东西。

感谢您的任何帮助或建议!

更新:

更进一步:http://jsfiddle.net/q8DUC/20/
只是不知道如何避免按钮的跳跃!
有没有办法将按钮粘贴到底部而不是顶部:0?

一如既往地感谢每一个建议或帮助!

【问题讨论】:

  • 任何有想法/建议或代码的人!?!?

标签: javascript jquery canvas


【解决方案1】:

我认为您可以获取页脚的位置并将其添加到您的条件中,以检查是否应显示按钮:

// dynamically get the position of the footer
var FOOTER_POSITION = someNumber;
// i THINK something like var FOOTER_POSITION = $('#T4').position().top; could work

if (300 < $win.scrollTop() && $win.scrollTop() < FOOTER_POSITION) {

对不起,我读错了你的问题,因为你的按钮使用固定定位,你可以实现类似的东西:

  1. 获取页脚高度 + 30px
  2. 根据您的小提琴 ~2000px (FOOTER_START) 获取页脚相对于文档的位置
  3. 如果窗口顶部的位置 > 300 并且大于 (FOOTER_START) 将 #back-top bottom 属性更改为页脚的高度

【讨论】:

  • 谢谢 - 这是一个非常好的解决方法,让按钮一碰到页脚就消失。但如果它消失了,它有点错过“返回顶部”按钮的想法。我需要它在页脚上方停止/变为静态,以便客户可以使用它滚动回顶部。有什么建议可以做到吗?
  • @user2899161,对不起,我没看错你的问题,更新了一些逻辑来帮助解决你的问题!
  • 非常感谢@dm03514!我确实理解它背后的逻辑。但老实说,我就像一个初学者,直到上周才处理这个问题 - 所以我没有将逻辑转化为代码的技能!此外,该按钮应该适用于不同长度的页面。非常感谢您的帮助.. 谢谢!
  • 嘿伙计!我真的需要你的帮助。我尝试了一切都无济于事。我无法让代码工作......你有没有机会在这里帮助我并扩展上面的代码?非常感谢!
  • 没有完成...我迷路了。猜猜它必须与滚动到页脚区域一起工作。 @dm03514 非常感谢您的意见和帮助!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-05-11
  • 1970-01-01
  • 1970-01-01
  • 2018-10-03
  • 2016-11-05
相关资源
最近更新 更多