Question

我在网页应用的页面上有一个固定元素（菜单标签），这样当iPhone键盘打开时，菜单会在滚动时重新定位以保留在窗口中。当键盘关闭时，我希望元素根据页面加载CSS返回到原始位置。

如何删除我在焦点上添加的滚动事件？这似乎是问题，我的代码不起作用。

此外是否有一种方法可以将元素保持在适当的位置并使页面在其后方滚动？滚动发生后，我的代码将元素捕捉到位。

谢谢！

固定元素的CSS：

#fixed-floating-menu {
  position: fixed;
  right: 0;
  top: 103px;
  z-index: 9999;
  background-color: @navy;
  border: @gray;
  text-align: center;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-color: @box-border-color;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
  opacity: 0.7;

  tr td {
    padding: 10px;
  }

  .icon-popover-menu-side {
    color: @white;
  }
}

MY JS处理键盘打开/重新定位元素：

// Adjust scrolling behaviour if iPhone
var iOS = /(iPad|iPhone|iPod)/g.test(navigator.userAgent);

if (iOS) {
    $("body").mobileFix({                           // Pass parent to apply to
        inputElements: "input, textarea, select",   // Pass activation child elements
        addClass: "fixfixed"                        // Pass class name
    });
}

// iPhone scroll fix with keyboard open
$.fn.mobileFix = function (options) {
var $parent = $(this);

$(document)
    .on('focus', options.inputElements, function(e) {
        $parent.addClass(options.addClass);

        setTimeout(function() {
            var handPosition = window.pageYOffset - 7;
            $("#fixed-floating-menu").css("position", "absolute").css("top", handPosition).css("right", -10);
        }, 1);

        $(window).scroll(function(e) {
            var handPosition = window.pageYOffset - 7;
            $("#fixed-floating-menu").css("position", "absolute").css("top", handPosition).css("right", -10);
        });

    })
    .on('blur', options.inputElements, function(e) {
        $parent.removeClass(options.addClass);

        // Fix for some scenarios where you need to start scrolling
        setTimeout(function() {
            $(document).scrollTop($(document).scrollTop());
        }, 1);

        $(window).off('scroll', function(e) {
            $("#fixed-floating-menu").css("position", "fixed").css("top", -7).css("right", -10);
            return true;
            });

        });

    return this; // Allowing chaining
};

Answer 1

$('elementSelector').removeAttr('style');

Answer 2

尝试更改

$（window）.scroll（function（e）{ var handPosition = window.pageYOffset - 7; $（＆＃34; #fixed-floating-menu＆＃34;）。css（＆＃34; position＆＃34;，＆＃34; absolute＆＃34;）。css（＆＃34; top＆＃34;，handPosition ）.css（＆＃34; right＆＃34;，-10）; }）;

到

$（window）.on（＆＃34; scroll＆＃34;，function（e）{ var handPosition = window.pageYOffset - 7; $（＆＃34; #fixed-floating-menu＆＃34;）。css（＆＃34; position＆＃34;，＆＃34; absolute＆＃34;）。css（＆＃34; top＆＃34;，handPosition ）.css（＆＃34; right＆＃34;，-10）; }）;

据我所知，.off（）方法删除了用.on（）方法附加的事件处理程序。

之后将元素返回到原始CSS - jQuery / Javascript

2 个答案: