Javascript 增强功能，并在窗口大小低于770px时将其关闭

在我的项目页面上有两个网格，一个用于图像，另一个用于包含项目信息的框，信息框的位置固定，因此它可以与页面一起滚动-通过下面的JavaScript，我成功地使它在到达页脚时停止滚动。请看这里：

我遇到的问题是，在像iphone这样的非常小的屏幕上，我想禁用滚动，并给每个网格（图像网格、信息框）一个100%的百分比。但我似乎不知道如何在屏幕大小超过770时停止启动该功能并重新打开它。我几乎已经完成了，但由于在功能上它增加了边距，当它在小屏幕上被禁用时，边距将保持不变，这会产生一个我无法摆脱的大空白空间。有什么想法吗

//StickyBox
$(function () {
    $.fn.scrollBottom = function () {
        return $(document).height() - this.scrollTop() - this.height();
    };
    var $StickyBox = $('.detailsBox');
    var $window = $(window);

    $window.bind("scroll resize", function () {
        var gap = $window.height() - $StickyBox.height() - 10;
        var visibleFoot = 255 - $window.scrollBottom();
        var scrollTop = $window.scrollTop();

        if (scrollTop < 50) {
            $StickyBox.css({
                top: (130 - scrollTop) + "px",
                bottom: "auto"
            });

        } else if (visibleFoot > gap - 100) {
            $StickyBox.css({
                top: "auto",
                bottom: visibleFoot + "px"
            });

        } else {
            $StickyBox.css({
                top: 80,
                bottom: "auto"

            });
        }
    });
});

//粘滞盒
$（函数（）{
$.fn.scrollBottom=函数（）{
返回$（document.height（）-this.scrollTop（）-this.height（）；
};
var$StickyBox=$（'.detailsBox'）；
变量$window=$（window）；
$window.bind（“滚动调整大小”，函数（）{
var gap=$window.height（）-$StickyBox.height（）-10；
var visibleFoot=255-$window.scrollbooth（）；
var scrollTop=$window.scrollTop（）；
如果（滚动顶部<50）{
$StickyBox.css({
顶部：（130-滚动顶部）+“px”，
底部：“自动”
});
}否则，如果（可见英尺>间隙-100）{
$StickyBox.css({
顶部：“自动”，
底部：visibleFoot+“px”
});
}否则{
$StickyBox.css({
排名：80，
底部：“自动”
});
}
});
});

您可以这样做：

$window.bind("scroll resize", function () {
   if($(this).width() < 770) {
       return;
   }

   // rest of your code...

$window.bind（“滚动调整大小”，函数（）{
if（$（this）.width（）<770）{
返回；
}
//剩下的代码。。。

这个怎么样

function onlyIfWidthGreaterThan(width, fn) {
    if ($(window).width() > width) {
        fn();
    }
}

用法如下：

onlyIfWidthGreaterThan(770, function() {
    // do your stuff

});

尝试添加：

if($window.width() <= 770) { 
    // reset your sticky box's margins
    $StickyBox.css({
      top: 'auto',
      bottom: 'auto'
    });
    return;
}

if（$window.width（）间隙-100）{
$StickyBox.css({
顶部：“自动”，
底部：visibleFoot+“px”
});
}否则{
$StickyBox.css({
排名：80，
底部：“自动”
});
}

---

在

$window.bind（“scroll resize”

回调中声明所有变量后立即添加此项。

在函数中的何处检查屏幕大小？我看不到770的任何内容？我尝试在以下内容中扭曲它：

$（window）.scroll（函数（）{if（$（this）.width（）>770）{}）

但它不起作用，也不起作用？不，伙计，我不知道我做错了什么。它已经禁用了同一页面上的所有其他JavaScript，以及它本身的函数，甚至在770以上，因为您的代码按照您希望的方式运行？或者它已经损坏？您的代码看起来像我编辑上面的代码一样？它已经被禁用了n从所有屏幕大小禁用不管怎样，我只希望它在770以下时被禁用。这确实有效！但是，当它不可禁用时添加的所有边距仍然存在，我们是否可以重置它？或者清除它们？当然，只需将边距重置代码放在返回语句之前；参见上文。对不起，伙计，你是什么意思，请容忍我，我是新来的-我花了几个星期的时间终于完成了这个脚本

if($window.width() <= 770) { 
    // reset your sticky box's margins
    $StickyBox.css({
      top: 'auto',
      bottom: 'auto'
    });
    return;
}

$window.bind("scroll resize", function () {
    var gap = $window.height() - $StickyBox.height() - 10;
    var visibleFoot = 255 - $window.scrollBottom();
    var scrollTop = $window.scrollTop();

    if($window.width() <= 770) { 
        // reset your sticky box's margins
        $StickyBox.css({
          top: 'auto',
          bottom: 'auto'
        });
        return;
    }

    if (scrollTop < 50) {
        $StickyBox.css({
            top: (130 - scrollTop) + "px",
            bottom: "auto"
        });

    } else if (visibleFoot > gap - 100) {
        $StickyBox.css({
            top: "auto",
            bottom: visibleFoot + "px"
        });

    } else {
        $StickyBox.css({
            top: 80,
            bottom: "auto"
        });
    }