对象在滚动时隐藏和显示

Question

我已经有一个运行良好的功能：当我滚动页面时，对象显示（不透明度）并滑动 80px（顶部 -/+80px），当它的一半进入 window 当它离开时它再次滑动并隐藏。

代码

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

现在我有比 window 高度还长的物体，所以我希望当物体底部比 window 顶部和物体底部到达 10vh 时它们能产生相同的效果顶部是 window 底部之前的 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

问题出在这两行

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

outerHeight() 函数 returns 一个数字，而你只是想 decrease/increase 从字符串中得到它。

你应该这样计算 1vh 点

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

然后乘以 10

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

修复后元素将被正确隐藏：

function visibleHide(){

    $('.hideme').each(function(){
        var windowOneViewHeight = $(window).height() / 100;
        var top_of_object = $(this).offset().top + ( (windowOneViewHeight * 10)); // no also add the item height, only the offset top is needed
        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'});
        }
        else 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'});
        }
    });
}

对象在滚动时隐藏和显示

Object hide and show at scroll

jquery

show-hide