Question

我有一个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
                    });
                };
            });
        });

这很有效，除非浏览器高度低于400px，否则会出错。

所以我认为我会包含一个简单的行，只有在浏览器为＆gt; = 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
                    });
                };
            });
        });
        }

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

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

感谢您的帮助！

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

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

Answer 2

跟踪浏览器宽度＆amp;正在调整大小的高度：

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

    // More code here...
};

但是，我认为有一种更好的方法来保持你的div，一个不涉及Javascript的方法。您是否尝试过使用position:fixed？

特定窗口大小的触发功能

2 个答案: