0

私のプロジェクトページには、画像用とプロジェクトに関する情報を含むボックス用の2つのグリッドがあります。情報ボックスは固定されているため、ページとともにスクロールします-以下の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;
}

イベントリスナーで宣言された vars の後、次のようになります。

$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

これはどう？

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

次のような使い方:

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

});
于 2013-09-05T13:21:46.640 に答える