Jquery 弹出式滚动条答案

【问题标题】：Jquery Popup scrolltopJquery 弹出式滚动条
【发布时间】：2018-03-19 22:38:25
【问题描述】：

我正在使用简单的 Jquery 创建一个基本的弹出窗口，而不是将弹出窗口顶部滚动到窗口高度。是否可以让弹出窗口滚动到用户视图位置？谢谢。

$(document).scroll(function(){
    if (!$("#mc_embed_signup").data('userClosed')) {
        $(".popup-close").click(function(e){
            closeSPopup(e);
        });

        var a = $(this).scrollTop();
        if (a > 350) {
          $("#mc_embed_signup").show().animate({top: (window.innerHeight / 2 - 0) + "px"}, 1800);
        }
    }
});

function closeSPopup(e){
    e.preventDefault();
    $("#mc_embed_signup").data('userClosed',true);
    $("#mc_embed_signup").hide();
};

【问题讨论】：

对不起，让我在我的问题中添加代码 sn-p。
您是否考虑过固定弹出窗口的位置？
感谢您的建议，但它的位置是固定的，但不知何故它一直滚动到顶部。
我对这个逻辑有一些担忧。第一个是您在滚动处理程序中创建单击事件。这意味着如果逻辑落入 if 的 true 部分，那么该事件将被绑定多次。您应该避免这种情况，因为它会不必要地多次执行相同的工作，并且可能导致您必须追查的问题。我的第二个担心是您正在滚动事件中执行动画，这将发生很多。我的假设是这就是为什么您有时会看到不希望的滚动效果....继续。
cont... 您应该考虑限制或去抖动逻辑，以便在给定时间只运行一个动画。这方面的一个例子可以在stackoverflow.com/questions/47212809/… 中找到

标签： jquery css module popup scrolltop

【解决方案1】：

您可以使用 css 过渡获得您想要的效果

<style>
    #mc_embed_signup {
        position: fixed;
        top: -500px; //position offscreen; must be at least size of the 
                       popup
        -webkit-transition: all 1.8s ease;
        -moz-transition: all 1.8s ease;
        -o-transition: all 1.8s ease;
        transition: all 1.8s ease;
    }
</style>

$(document).ready(function() {
   window.onscroll = function () { scrollFunction(); };

   scrollFunction() {
       var scrollPosition = document.documentElement.scrollTop;

       if (scrollPosition > 350) {
           $("#mc_embed_signup").show().css("top", (window.innerHeight / 
           2 - 0).toString());
       }           
   }
});

【讨论】：

嘿，富兰克林，非常感谢。我将尝试代码并随时通知您。感谢您的帮助。