0

在我的项目页面上有两个网格，一个用于图像，一个用于包含项目信息的框，信息框的位置是固定的，因此它会随着页面滚动 - 并且使用下面的 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"

            });
        }
    });
});
4

4 回答 4

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"在回调中声明所有变量后立即添加。

于 2013-09-05T13:22:26.043 回答
0

你可以这样做：

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

   // rest of your code...
于 2013-09-05T13:19:46.900 回答
0 
$(window).resize(function(){
   if($(window).width() > 770) {
      // if it is more than 770
   } else {
      // if it is less or equal
   }
})
于 2013-09-05T13:19:56.743 回答
0

这个怎么样？

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

用法如：

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

});
于 2013-09-05T13:21:46.640 回答