location.reload() 在 ajax 中用于按钮正在弄乱我的 jquery 动画

Question

所以我有一个按钮，它使用ajax将数据发送到php脚本。另外，我有一个导航栏，当我向下滚动时，其背景会发生变化。这里唯一的问题是，一旦我向下滚动到一个点(之后导航栏背景发生变化(，然后我单击按钮。location.reload(( 显然刷新了页面，因此恢复了导航栏的原始颜色。并不是说jQuery滚动触发器导航背景更改在那之后不起作用，但是页面刷新仍然会将导航栏的背景恢复到原始状态(直到我再次滚动为止。

这是我的导航栏的jQuery代码：

    <script>
    $(document).ready(function(){
        $(window).scroll(function(){
            var scroll = $(window).scrollTop();
        console.log("Scroll at " + scroll);
        if (scroll > 500) {
            $(".navbar").css("background" , "linear-gradient(to right,#4776E6 ,#8E54E9)");
        }
        else
        {
            $(".navbar").css("background" , "linear-gradient(to right, #434343 ,#000000 ,#434343)");
        }
        })
      })
    </script>

按钮的 ajax 代码：

cart.submit(function (e) {
        e.preventDefault();
        $("#add_to_cart").attr("disabled", true).val('Adding to Cart');
        $.ajax({
            type: cart.attr('method'), // POST or GET
            url: cart.attr('action'),   // THE PHP PAGE 
            data: cart.serialize(),
            success: function (data) {
                if(data == "yes"){
                    alert("Event Added to Your Cart");
                    location.reload();
                }
                else{
                    alert(data);
                    $("#add_to_cart").attr("disabled", false).val('Participate');
                }
            },
        });

这是 gif 的链接

Answer 1

不要只使用 $(window).scroll(function(){ ，请尝试使用以下内容： $(document).on('scroll ready', function(){

编辑：我建议的解决方案不仅会检查用户何时滚动，还会检查何时准备就绪。由于您有一个 if 语句检查窗口是否已滚动">500"，因此它将在重新加载页面时检查相同的内容。