Question

经过一番建议后。我正在处理我的投资组合，并且我正在使用css过渡来为一个元素设置动画，其中一些联系信息会在用户向上滚动时变为活动状态。

在这个元素中有一个名为＆＃39; .top-bar-avatar＆＃39;的图形类元素。我也添加了工具提示和反弹动画。这一切都有效，但我想要实现的是工具提示在Web浏览器中显示图形时自动显示和动画。

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

我似乎已经解决了这个问题，我只是添加并删除了display属性并在现有代码中修改了它的值，见下文。

哦我还在图像元素中添加了一个名为'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;
}

如果元素在视口中可见，则显示工具提示

1 个答案: