Javascript jquery滑入菜单动画错误

我已经写了一个脚本，有一个幻灯片在顶部栏品牌和一个菜单，该网站上方和下方的滑块或横幅。当他们向后滚动时，只有品牌和菜单。。没有滑块或横幅

它工作，但有一个错误，我似乎无法修复

页面有4个主要元素，但滑块或横幅不是始终存在的选项元素：

<div id="branding">BRANDING</div>
<div id="header">
    <div id="slider">SLIDER OR BANNER</div>
    <div id="menu">MENU</div>
</div>
<div id="content">CONTENT</div>

这是一个JSFIDLE，因为我现在有它。。。要查看错误，请快速上下滚动。。你应该看到菜单比它应该的位置低

非常感谢您的帮助。如果有更好的方法，我愿意接受建议

C

用户滚动后增加了250毫秒的延迟

如果/Android | webOS | iPhone | iPad | iPod | BlackBerry/i.testnavigator.userAgent{

 var sticky_navigation = function () {

     setTimeout(function // ###### ADDED ######

     $lH = ($('#branding').length) ? $('#branding').height() : 0,
     $sH = ($('#slider').length) ? $('#slider').height() : 0,
     $bH = ($('#banner').length) ? $('#banner').height() : 0,
     $mH = ($('#menu').length) ? $('#menu').height() : 0;

     var $content = $('#content'), // Main content area
         $branding = $('#branding'),
         $header = $('#header'),
         $menu = $('#menu');

     // HEADER
     if ($(window).scrollTop() > $lH) {
         $header.css({
             marginTop: $lH + "px"
         });
         if ($branding.css('position').toString() != "fixed") {
             $branding.css({
                 position: "fixed",
                 top: "-" + $lH + "px",
                 left: 0,
                 zIndex: 500,
             }).animate({
                 top: 0
             }, 700);
         }
     } else {
         $branding.css({
             position: "relative",
             marginTop: "0px",
         });
         $header.css({
             marginTop: "0px"
         });
     }

     // MENU
     if ($(window).scrollTop() > ($bH + $sH + $mH)) {
         $branding.css({
             boxShadow: "none",
         });
         $header.css({
             marginTop: ($lH + $mH) + "px"
         });
         if ($menu.css('position').toString() != "fixed") {
             $menu.css({
                 position: "fixed",
                 top: "-" + $lH + "px",
                 left: 0,
                 zIndex: 490,
             }).animate({
                 top: $lH
             }, 700);
         }
     } else {
         $menu.css({
             position: "relative",
             marginTop: "0px",
             top: 0,
         });
         if ($('#branding').length || $('#slider').length) {
             $branding.css({
                 boxShadow: "0 0 16px rgba(0, 0, 0, 0.5)",
             })
         }
     }
   } ,250); // ###### ADDED ######
 };
 // run our function on load
 sticky_navigation();

 // and run it again every time you scroll
 $(window).scroll(function () {
     sticky_navigation();
 });

 // and run it again every time you resize
 $(window).resize(function () {
     sticky_navigation();
 });

---

})

谢谢@BlueUnicorn，但问题仍然存在。如果你快速向上滚动然后向下滚动，菜单仍然比它应该的位置低。。。请看上面的图片。还有其他解决方法吗？再次感谢。尝试将超时时间从250和500增加，它应该可以工作。我尝试了250超时，它对我有效。你是一个快速滚动的人

 var sticky_navigation = function () {

     setTimeout(function // ###### ADDED ######

     $lH = ($('#branding').length) ? $('#branding').height() : 0,
     $sH = ($('#slider').length) ? $('#slider').height() : 0,
     $bH = ($('#banner').length) ? $('#banner').height() : 0,
     $mH = ($('#menu').length) ? $('#menu').height() : 0;

     var $content = $('#content'), // Main content area
         $branding = $('#branding'),
         $header = $('#header'),
         $menu = $('#menu');

     // HEADER
     if ($(window).scrollTop() > $lH) {
         $header.css({
             marginTop: $lH + "px"
         });
         if ($branding.css('position').toString() != "fixed") {
             $branding.css({
                 position: "fixed",
                 top: "-" + $lH + "px",
                 left: 0,
                 zIndex: 500,
             }).animate({
                 top: 0
             }, 700);
         }
     } else {
         $branding.css({
             position: "relative",
             marginTop: "0px",
         });
         $header.css({
             marginTop: "0px"
         });
     }

     // MENU
     if ($(window).scrollTop() > ($bH + $sH + $mH)) {
         $branding.css({
             boxShadow: "none",
         });
         $header.css({
             marginTop: ($lH + $mH) + "px"
         });
         if ($menu.css('position').toString() != "fixed") {
             $menu.css({
                 position: "fixed",
                 top: "-" + $lH + "px",
                 left: 0,
                 zIndex: 490,
             }).animate({
                 top: $lH
             }, 700);
         }
     } else {
         $menu.css({
             position: "relative",
             marginTop: "0px",
             top: 0,
         });
         if ($('#branding').length || $('#slider').length) {
             $branding.css({
                 boxShadow: "0 0 16px rgba(0, 0, 0, 0.5)",
             })
         }
     }
   } ,250); // ###### ADDED ######
 };
 // run our function on load
 sticky_navigation();

 // and run it again every time you scroll
 $(window).scroll(function () {
     sticky_navigation();
 });

 // and run it again every time you resize
 $(window).resize(function () {
     sticky_navigation();
 });