1

我有一个 div 跟随浏览器滚动并包含在另一个 div 中。

以下函数使我的 div 保持原位并在用户滚动时移动：

        $(function() {
            var offset = $("#sidebar").offset();
            var topPadding = 15;
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    $("#sidebar").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $("#sidebar").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });

这很好用，除非浏览器高度小于 400 像素，否则它会出现问题。

所以我想我会包含一个简单的行来让它只在浏览器> = 400时运行：

 if (window.innerHeight >= 400) {
        $(function() {
            var offset = $("#sidebar").offset();
            var topPadding = 15;
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    $("#sidebar").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $("#sidebar").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });
        }

只要初始浏览器高度大于 400 像素，这似乎就可以正常工作。如果浏览器窗口从其初始高度调整大小，代码仍将执行，这与我想要的相反。

本质上，有没有办法动态跟踪浏览器大小，只在高度大于 400 像素时运行此代码，而在小于 400 像素时不运行？

谢谢你的帮助！

4

2 回答 2

1

只需将检查移动到您的事件处理程序中：

$(function() {
    var offset = $("#sidebar").offset();
    var topPadding = 15;
    $(window).scroll(function() {
        if (window.innerHeight >= 400) {  // <=== Moved it here
            if ($(window).scrollTop() > offset.top) {
                $("#sidebar").stop().animate({
                    marginTop: $(window).scrollTop() - offset.top + topPadding
                });
            } else {
                $("#sidebar").stop().animate({
                    marginTop: 0
                });
            }
        }
    });
});

现在，当您处理scroll事件时，检查就完成了，而不是在一开始就阻止滚动完全被钩住。

另外，因为您是在scroll事件中执行此操作的，这种情况经常发生，所以我会尽量减少包装或查找元素的次数。而不是在每个事件上都这样做，因为window不会改变，我怀疑你sidebar也不会改变，包装/查找一次：

$(function() {
    var offset = $("#sidebar").offset();
    var topPadding = 15;
    var sideBar = $("#sidebar"); 
    var $window = $(window);
    $window.scroll(function() {
        if ($window.height() >= 400) {  // <=== Moved it here
            if ($window.scrollTop() > offset.top) {
                sidebar.stop().animate({
                    marginTop: $window.scrollTop() - offset.top + topPadding
                });
            } else {
                sidebar.stop().animate({
                    marginTop: 0
                });
            }
        }
    });
});

这也使得使用 jQuery 的height函数来window实现跨浏览器兼容性是合理的。

于 2012-11-17T07:26:36.757 回答
0

要在调整大小时跟踪浏览器的宽度和高度：

$(window).resize(function()
{
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();

    // More code here...
};

但是，我认为有一种更好的方法可以使您的 div 保持在适当的位置，一种不涉及 Javascript 的方法。你试过使用position:fixed吗？

于 2012-11-17T07:25:14.080 回答