防止移动

Question

我有一个在窗口滚动上运行的功能，我只希望它在768及以上的屏幕尺寸上工作。如果我将它加载到移动大小上，这可以正常工作，但是如果初始页面加载是在768px +的宽屏上，然后我缩小视口，它不会阻止该功能吗？

(function($) {

    var s,
    clippy = {
    settings: {
      heading: $('.js-clippy'),
    },
    init: function() {
      s = this.settings;
      this.bindEvents();
    },
    bindEvents: function(){
        if ($(window).width() > 768) {
            $(window).on("load resize scroll", $.proxy(this.getClippy, this));
        }
    },

    getClippy: function(){
      s.heading.each(function() {
        var layerOffset = $(this).closest('a').offset(),
          containerOffset = layerOffset.top - $(window).scrollTop(),
          clippy = containerOffset - $(this).css("top").replace(/[^-\d\.]/g, '') - $(this).css("margin-top").replace(/[^-\d\.]/g, '');
        $(this).css('clip', 'rect('+ clippy +'px, auto, auto, auto)');
      });
    },
    };
    clippy.init();

  })(jQuery);

我已经尝试在我的绑定事件中添加条件语句而没有运气......

bindEvents: function(){
        if ($(window).width() > 768) {
            $(window).on("load resize scroll", $.proxy(this.getClippy, this)); 
        }
});

只有事件似乎不起作用？

Answer 1

您应该考虑检查getClippy函数内的宽度。如果您使用大视口加载页面并缩小它，那将会有效。反之亦然。

    (function($) {

    var s,
    clippy = {
    settings: {
      heading: $('.js-clippy'),
    },
    init: function() {
      s = this.settings;
      this.bindEvents();
    },
    bindEvents: function(){
        $(window).on("load resize scroll", $.proxy(this.getClippy, this));
    },

    getClippy: function(){
        if ($(window).width() > 768) {
            s.heading.each(function() {
                var layerOffset = $(this).closest('a').offset(),
                containerOffset = layerOffset.top - $(window).scrollTop(),
                clippy = containerOffset - $(this).css("top").replace(/[^-\d\.]/g, '') - $(this).css("margin-top").replace(/[^-\d\.]/g, '');
                $(this).css('clip', 'rect('+ clippy +'px, auto, auto, auto)');
            });
        }
    },
    };
    clippy.init();

  })(jQuery);