Question

我已经有一个效果很好的功能：当我滚动页面时，对象显示（不透明度）并滑动80px（顶部 - / + 80px），当它的一半进入窗口的底部或顶部时它让它再次滑动并变得隐藏起来。

代码

function visibleHide(){
    $('.hideme').each(function(){
        var half_of_object = $(this).offset().top + ($(this).outerHeight()/2);
        var top_of_window = $(window).scrollTop();
        var bottom_of_window = $(window).scrollTop() + $(window).height();              
        if(half_of_object < top_of_window) {
            $(this).css({'opacity':'0','top':'-80px'});
        }
        if (half_of_object > bottom_of_window){
            $(this).css({'opacity':'0','top':'80px'});
        }   
        else if(half_of_object > top_of_window && half_of_object < bottom_of_window){
            $(this).css({'opacity':'1','top':'0'});
        }
    });
}
visibleHide();
jQuery(window).scroll(function(){
    visibleHide();
});

现在我有比窗口高度更长的物体，所以我希望它们在物体底部到达窗口顶部前10vh并且物体顶部在窗口底部之前10 vh时执行相同的效果。

我尝试了类似的东西，但根本不起作用，出了什么问题？

function visibleHide(){
    $('.hideme').each(function(){
        var top_of_object = $(this).offset().top + ($(this).outerHeight()-'10vh');
        var bottom_of_object = $(this).offset().top + ($(this).outerHeight()+'10vh');
        var top_of_window = $(window).scrollTop();
        var bottom_of_window = $(window).scrollTop() + $(window).height();              
        if(bottom_of_object < top_of_window) {
            $(this).css({'opacity':'0','top':'-80px'});
        }
        if (top_of_object > bottom_of_window){
            $(this).css({'opacity':'0','top':'80px'});
        }   
        else if(bottom_of_object > top_of_window && top_of_object < bottom_of_window){
            $(this).css({'opacity':'1','top':'0'});
        }
    });
}
visibleHide();
jQuery(window).scroll(function(){
    visibleHide();
});

Answer 1

问题在于这两行

UnicodeString

outerHeight（）函数返回一个数字，你只是想从字符串中减少/增加它。

你应该像这样计算1vh点

var top_of_object = $(this).offset().top + ($(this).outerHeight()-'10vh');
var bottom_of_object = $(this).offset().top + ($(this).outerHeight()+'10vh');

然后你将它乘以10

var windowOneViewHeight = $(window).height() / 100;

最终代码

        var top_of_object = $(this).offset().top + ($(this).outerHeight()- (windowOneViewHeight * 10));
        var bottom_of_object = $(this).offset().top + ($(this).outerHeight()+ (windowOneViewHeight * 10));

修复以便正确隐藏元素：

function visibleHide(){
    $('.hideme').each(function(){
          var windowOneViewHeight = $(window).height() / 100;
        var top_of_object = $(this).offset().top + ($(this).outerHeight() - (windowOneViewHeight * 10));
        var bottom_of_object = $(this).offset().top + ($(this).outerHeight() + (windowOneViewHeight * 10));
        var top_of_window = $(window).scrollTop();
        var bottom_of_window = $(window).scrollTop() + $(window).height();              
        if(bottom_of_object < top_of_window) {
            $(this).css({'opacity':'0','top':'-80px'});
        }
        if (top_of_object > bottom_of_window){
            $(this).css({'opacity':'0','top':'80px'});
        }   
        else if(bottom_of_object > top_of_window && top_of_object < bottom_of_window){
            $(this).css({'opacity':'1','top':'0'});
        }
    });
}
visibleHide();
jQuery(window).scroll(function(){
    visibleHide();
});

对象隐藏并在滚动时显示

1 个答案: