Question

我正在经历一些奇怪的事情，我写了一段代码，只要用户滚过div框就会放大链接。我正在使用此代码：

function resize_links() {
    $(".all_planes a").css({fontSize: "16px"})
    $( ".plane_container" ).each(function( ) {
        var offtop = $(this).offset().top;
        var scrolltop = $(window).scrollTop();

        var type = $(this).data("type");

        if(scrolltop > offtop) {
            if (window.console) console.log(scrolltop + " " + offtop + " " + type);

            $("." + type + "_link").css({
                fontSize: "20px"
            });
        }
    });
}
$( window ).scroll(function() {
    resize_links();
});

上面的功能有效，但只要我在scrolltop变量（scrolltop = scrolltop + 98）添加一些像素来解释我网站上的固定标题，就会发生不合逻辑的事情。通过查看控制台，我发现在这种情况下，scrolltop和offtop的值是相同的。没有98，offtop是一个恒定值，因为它在逻辑上应该是我试图从scrolltop中减去一个值，以确定是否会产生影响，并且令人惊讶的是一切都按照这种方式运行。我也停用了其他JS代码来检查是否存在干扰，但我也找不到这样的解决方案。
值得注意的是，使用jQuery .plane_container方法将.html() div加载到站点上。代码：

$('document').ready(function(){
    var startupcont = $(".skyline_cont").html();
    $(".sky_go_switch").html(startupcont);   
});

所以有一些非常奇怪的事情会以某种方式进行，如果你需要了解更多的事情来了解这个问题，那么我当然会将这个添加到我的问题中。提前谢谢！

修改
基本上这就是我想要实现的目标：https://jsfiddle.net/xs5rov25/

编辑2：
我不知何故被困在这里，似乎没有任何意义。只要我向scrolltop添加任何值，offtop值就会变得很疯狂。但我可能已经找到了一个提示：如果我省略了动态加载的内容并将内容直接发布到.sky_go_switch div中，我的代码工作正常 - 即使添加了98。是否有不同的方式来管理动态加载（用户可以控制显示哪些内容 - 有两个选项 - 请参阅此小提琴：https://jsfiddle.net/1Lret7vk/4/）？或者有没有办法更改我当前的resize_links代码，以便它在我的情况下工作？

编辑3：
好的，所以我终于能够在我的小提琴中重现这个问题了。我合并了我创建的两个小提琴，现在你可以看到问题。
没有98 - 工作版本：https://jsfiddle.net/a5jxw2jd/
添加98 - 疯狂的事情开始发生：https://jsfiddle.net/72jkfxkw/
您可以看到所有链接一次调整大小，第二个小提琴中的第一个滚动。这是因为scrolltop在某种程度上与offtop相同（见控制台）。

Answer 1

我无法解释为什么（因为我会想象没有+ 98的小提琴应该有同样的问题），但我知道你可以通过改变它来使你的盒子选择器只适用于可见的盒子来解决它选择器从“.box”到“.switcher_content .box”。我猜这与隐形元素的偏移位置产生奇怪结果这一事实有关，并且由于您正在为每个评估的.box更新所有#_link元素，因此不可见的元素会覆盖可见框的正确值。但就像我说的那样，我没有解释为什么在没有+ 98的情况下没有发生同样的事情......

Javascript / jQuery - 为整数添加值更改其他变量

1 个答案: