Question

我正在尝试在display：none和display：block之间进行转换。 id为＃octopus-head的div应该在向下滚动时淡出，而在向上滚动时返回，但是现在它只是立即弹出或弹出。

这是我正在使用的javascript：

//sticky header scripts

// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = jQuery('.scroll-height-setter').innerHeight();

jQuery(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 100);

function hasScrolled() {
    var st = jQuery(this).scrollTop();

    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        jQuery('#octopus-head').removeClass('nav-down').addClass('nav-up').fadeOut(1000);
    } else {
        // Scroll Up
        if(st + jQuery(window).height() < jQuery(document).height()) {
            jQuery('#octopus-head').removeClass('nav-up').addClass('nav-down').fadeIn(1000);
        }
    }

    lastScrollTop = st;
}

Answer 1

显示没有内容不能使用过渡，因为没有要过渡的内容。

您可以使用setTimeout（）添加一个过渡类，使div的不透明度为零，然后将类切换为最终不透明度100％。

或者您可以始终使用不透明度，而永远不显示div。这取决于您的实际需求。

使.removeClass（）和.addClass（）在向上和向下滑动时平稳过渡

1 个答案: