Question

所以我正在创建一个网站，当scrollTop值达到450时，它会显示一些侧链接和浮动标题现在可以在Firefox上运行正常但在Chrome中却没有！我从这里找到的问题尝试了不同的解决方案，但没有一个有效！

我试图将所有内容添加到包装器div并将jquery.scroll代码选择器从body更改为.wrapper -did not working -

我尝试将这行代码添加到我的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");
}

});

Answer 1

只需选择它们=＆gt; $('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)

Answer 2

尝试使用document代替body：

$(document).scroll(function () {
var scrollVal = $(document).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这样的动画：

$("html,body").animate({ scrollTop: 0 }, "slow");

jquery scrollTop无法处理chrome -webkit-

2 个答案: