javascript - JS 中的 flex 滚动和菜单栏错误

Question

我想设置一个菜单栏，就像你在 JSfiddle 中看到的那样:

http://jsfiddle.net/gvjeyywa/21/

它完全按照我想要的方式工作......但是在网页上它有一个错误，我认为这是因为 OSX 中的 flex 滚动......向下滚动时菜单栏应该从顶部滑入以设置top:0px, 固定在那里...但是如果你滚动回到顶部并且 flex 滚动滚动到比 body 高...菜单跳得太高...

这里看活生生的例子: http://www.cyrill-kuhlmann.de/index.php/projects

在 iOS 上也是一团糟……

这是JS代码:

         var bitFlag = false;
    var isActive = true;
    var lastScrollTop = 0;
    var timeoutId;
    $navigation = $("#navigation");
    $(window).scroll(function (event) {
        var intWindowTop = $(window).scrollTop();
        var intElementBottom = $navigation.offset().top + $navigation.height();
        if (intWindowTop > lastScrollTop) {
            isActive = true;
            if (!bitFlag) {
                $navigation.css("position", "absolute").css("top", intWindowTop + "px");
                bitFlag = true;
            }
            if (timeoutId) {
                clearTimeout(timeoutId);
            }
            timeoutId = setTimeout(function () {
                if (intWindowTop > intElementBottom) {
                    intDelayTime = setTimeout(function () {
                        if (isActive) {
                            $navigation.animate({ top: intWindowTop + "px" }, {
                                duration: 800,
                                step: function () {
                                    if ($(window).scrollTop() < $navigation.offset().top) {
                                        $(this).stop(true,true);
                                    }
                                },
                                complete: function () {
                                    intDelayTime2 = setTimeout(function () {
                                        $("#navigation").css("position", "fixed").css("top", "0px");
                                        bitFlag = false;
                                        isActive = false;
                                    }, 1);
                                }
                            });
                        }
                    }, 500);
                }
            }, 100);
        } else {
            $navigation.css("position", "fixed").css("top", "0px");
            bitFlag = false;
            isActive = false;
        }
        lastScrollTop = intWindowTop;
    });

这是 CSS:

 #navigation {
  position:absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 80px;
  background-color: #FFF;
  z-index:999;
  padding-top: 25px;
  padding-left: 45px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  }

有人有想法吗？不幸的是，我是 JS 的初学者……感谢您的帮助……

Answer 1

问题是这样的:intWindowTop > lastScrollTop。 当您滚动到 webkit 附带的负区域时，此值为 true。

因此您必须通过 intWindowTop > 0

检查该值是否为正

$(window).scroll(function () {
    var intWindowTop = $(window).scrollTop();
    var intElementBottom = $navigation.offset().top + $navigation.height();
    if ( intWindowTop > lastScrollTop && intWindowTop > 0 ) {
      //...
    } else { 
      //...
    }

请注意，我也删除了变量“event”。你不使用它，那么为什么要声明它..？