Question

在我的项目页面上有两个网格，一个用于图像，一个用于包含项目信息的框，信息框定位固定，因此它随页面滚动 - 并且使用下面的JavaScript我设法得到它到达页脚时停止滚动。看看这里：http://meeped.co.uk:93/portfolio/ambition-world.html 1

我遇到的问题是，在像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"

            });
        }
    });
});

Answer 1

尝试添加：

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"
        });
    }

在$window.bind("scroll resize"回调中声明所有变量后，立即添加此内容。

Answer 2

你可以这样做：

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

   // rest of your code...

Answer 3

$(window).resize(function(){
   if($(window).width() > 770) {
      // if it is more than 770
   } else {
      // if it is less or equal
   }
})

Answer 4

这个怎么样？

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

用法如：

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

});

当窗口大小低于770px时，增强功能并关闭它

4 个答案: