Question

我需要创建一个固定菜单，该菜单必须在某个滚动顶部值之后更改其背景（具有向下滑动效果）。它必须具有以下功能：
（1）顶部必须有黑色背景
（2）向下滚动后必须在某一点更改为浅色背景，而向上滚动至该点之后必须返回至深色背景
（3）转向浅色背景后，应将深色背景设置为透明并有延迟，以使两个背景之间的过渡看起来平滑
注意：我不能以任何方式隐藏第一个（深色）标题（我的意思是不透明，显示，可见性等）。
一切正常，但是我遇到了两个问题：
（1）滚动到顶部后背景并不总是很暗
（2）在从亮到暗的过渡过程中，会有闪烁的透明背景
是什么原因导致此类问题？我究竟做错了什么？这是我的代码：

var animatedScroll = false;
jQuery(window).scroll(function(){
if (!animatedScroll) {
    animatedScroll = true;
    if  (jQuery(window).scrollTop() >= 300 && jQuery(window).scrollTop() != 0){
        jQuery('#main-header').delay(300).queue('fx', function() { jQuery(this).addClass('transp_bg').dequeue(); });
        jQuery('.menu_light').stop().animate({"top":"0"},250, function(){
            animatedScroll = false;
        });
    } else {
        jQuery('.txt').attr("style","");
        jQuery('#main-header').removeClass('transp_bg');
        jQuery('.menu_light').stop(true).animate({"top":"-150px"},250, function(){
            animatedScroll = false;
        });
    }
 }
});

这是jsfiddle：
https://jsfiddle.net/xpvt214o/726346/
我正在使用jQuery而不是$符号，因为我必须在Wordpress环境中执行此操作。
预先感谢您的帮助！

如何使滚动导航平滑流畅地进行？

0 个答案: