【问题标题】:Jquery sticky function fails on fast scroll to the topJquery粘性功能在快速滚动到顶部时失败
【发布时间】:2014-02-10 11:58:04
【问题描述】:

我正在使用对象中的函数将侧面板转换为滚动时的顶部面板。

看起来像这样(我“缩小了代码并删除了对象名称”):

$(document).on("scroll", vars.stickyNav );

var vars = { ... etc

    undoStick: function() {
        vars.sticked = false; 
        vars.stickyMenu.removeClass('_sticked');

        return vars.stickyMenu.animate({ 'top': '-60px' }, 0, function() {
            vars.clone.css({'left':-32,display:'none'});
        });
    },

    stickyNav: function() {
        if ( ! vars.sticked && vars.stickyHeight <= vars.scrollTop ) {
            vars.sticked = true;

            return vars.stickyMenu.addClass('_sticked').animate({ 'top': '40px'}, 0, function(){
                vars.clone.show(null);
                vars.clone.css('left',0);
            });
        } 
        else if ( vars.sticked && vars.stickyTop >= vars.scrollTop ) {
            return vars.undoStick();
        }
    }
}

问题在于..如果我从页面底部的某个地方快速滚动到页面顶部,面板不会粘回侧面。如果我滚动正常/慢速/正常快速它可以工作。

大部分变量是在滚动函数之外定义的。有一个附加的滚动函数绑定到窗口,它在滚动时更新 $(window).scrollTop() 变量。

这种行为的原因可能是什么?动画函数设置为 0ms。

PS:有一个 css 过渡(三次贝塞尔曲线)。

【问题讨论】:

  • 这可能是由于滚动步骤。如果您在触发功能上稍加延迟,它会起作用吗?
  • 我该怎么做?设置超时?
  • 看起来它取决于文档高度。文档越高,发生的错误就越多。触发的事件太多了?
  • 好的。如果我使用 $(window).scrollTop() 而不是由其他滚动函数填充的变量,它可以工作。

标签: javascript jquery jquery-animate sticky onscroll


【解决方案1】:

发现问题。如果我将动画()转换为 css(),一切正常。谢谢。

对不起,要禁食。它效果更好,但并非一直如此。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-06-15
    • 2021-12-20
    • 1970-01-01
    • 2015-04-04
    • 1970-01-01
    • 2011-02-11
    • 2021-06-12
    相关资源
    最近更新 更多