显示工具提示如果在视口内可见元素

Question

一点点建议。我正在研究我的投资组合，并且正在使用CSS过渡来为元素进行动画，并使用一些接触信息，这些信息在用户滚动时会变得活跃。

在此元素中，有一个称为" .top-bar-avatar"的图类元素，我也添加了一个工具尖和弹跳动画。这一切都在起作用，但是我想实现的目标是使工具尖端自动显示和动画在网络浏览器中显示。

html <li><figure class="top-bar-avatar"><img src="img/nick_avatar.png" alt="Top Bar Avatar Image Of Nick" title="Find Out More About Me" data-toggle="tooltip" data-placement="bottom"></figure></li>

JS $('[data-toggle="tooltip"]').tooltip();

var lastScrollPosition = 0;
window.onscroll = function() {
    var newScrollPosition = window.scrollY;
    if (newScrollPosition < lastScrollPosition){
        //upward code here
        $('.top-bar').addClass('top-bar-animate');
    }else{
        //downward - code here
        $('.top-bar').removeClass('top-bar-animate');
    }
    lastScrollPosition = newScrollPosition;
}

尝试了几种不同的方法来成功。任何意见，将不胜感激。提前欢呼

Answer 1

我似乎自己解决了这个问题，我只是添加并删除了显示属性并在现有代码中修改了其值，请参见下文。

哦，我还向图像元素添加了一个称为" profile-pic"的Div ID，而不是专注于其中包含的图。

var lastScrollPosition = 0;
window.onscroll = function() {
    var newScrollPosition = window.scrollY;
    if (newScrollPosition < lastScrollPosition){
        //upward code here
        $('.top-bar').addClass('top-bar-animate');
        // display tool-tip when top-bar animates in
        $('#profile-pic').tooltip('show');
    }else{
        //downward - code here
        $('.top-bar').removeClass('top-bar-animate');
        // hide tool-tip when top-bar animates out
        $('#profile-pic').tooltip('hide');
    }
    lastScrollPosition = newScrollPosition;
}