jquery - jQuery scrollTop在chrome -webkit-上不起作用

因此，我正在制作一个网站，当scrollTop值达到450时，它会显示一些侧链接和一个浮动标头，该标头现在可以在Firefox上正常工作，但在chrome中却不能！我尝试了与这里发现的问题不同的解决方案，但没有一个起作用！

我试图将所有内容添加到包装div并将jquery.scroll代码选择器从主体更改为.wrapper-不起作用-

我试图将这行代码添加到我的jquery

 $("html").animate({ scrollTop: 0 }, "slow"); // also tried changing to body and so on

倒这个问题是从我的CSS我有这些规则

html,body{
  overflow-x: auto;
  height: 100%;
}

不幸的是，当我删除这些规则之一时，滚动无法在FireFox上运行，也无法在Chrome或任何Webkit浏览器上运行

我的滚动jQuery代码是

$(" body ").scroll(function () {
var scrollVal = $(" body ").scrollTop();

if (scrollVal > 450) {
    $(".sn-links-srz").addClass("scroll-sn-show");
    $("#global-nav").css("display", "block");
}
else {
    $(".sn-links-srz").removeClass("scroll-sn-show");
    $("#global-nav").css("display", "none");
}

});

最佳答案

只需选择它们两个=> $('html, body').animate({ scrollTop: x }, options)。

编辑：
这是我在另一个网站上使用的：

var win = $(window),
    body = $(document.body);

win.scroll(function () {
    var scroll = window.pageYOffset || document.documentElement.scrollTop;

    // header correction
    body.toggleClass(cfg.scrolledClass, scroll < 90);

    // performance boost
    body.addClass(cfg.scrollingClass); // css: pointer-events: none

    // provide a throttling class
    self.fn.delayedEvent(function () {
        body.removeClass(cfg.scrollingClass);
    }, 300, 'scrolling');
});

要将以上示例应用于您的代码，我将其重写为：

var links = $(".sn-links-srz"),
    nav = $("#global-nav");

$(window).scroll(function () {
    var scrollVal = window.pageYOffset || document.documentElement.scrollTop,
        isScrolled = scrollVal > 450;

    links.toggleClass("scroll-sn-show", isScrolled);
    if (isScrolled){
        nav.show();
    } else {
        nav.hide();
    }
});

在性能上很重要，要在此函数范围之外缓存尽可能多的变量。由于滚动速度很快，因此一次又一次地选择变量没有用。

与对链接所做的一样，使用“ .scrolled” CSS类，您也可以重构if else结构，而只需使用nav.toggleClass('scrolled', isScrolled)即可。

如果您要在导航和链接中使用相同的CSS“ .scrolled”类以及链接或之后出现的任何内容，则可以执行nav.add(links).toggleClass('scrolled', isScrolled)