Question

当我向下滚动页面时，我的导航栏尺寸会减小，当滚动位于顶部时，它会采用正常尺寸。使用mousescrollwheel滚动时一切正常，但是当我手动单击并拖动页面上的滚动条时，就好像它不识别scrollTop值一样。它需要大约5秒左右才能实现它在顶部然后应用风格，而使用mousescrollwheel它可以完美地工作。

$(window).scroll(function () {
    var scrollPosition = $(document).scrollTop();

    if (scrollPosition > "1") {
        $("#topNav").animate({
            height: "30px"
        }, 90, function () {

        });
        $("#topNav li").animate({
            padding: "5px 0 0 0"
        }, 90, function () {

        });
    } else if (scrollPosition <= "1") {
        $("#topNav").animate({
            height: "50px"
        }, 90, function () {

        });
        $("#topNav li").animate({
            padding: "15px 0 0 0"
        }, 90, function () {

        });
    }
});

我错过了什么？

Answer 1

请尝试以下代码：

$(window).on('scroll mousedown mouseup mousemove',function(){

  var scrollPosition = $(document).scrollTop();

    if (scrollPosition > "1") {
        $("#topNav").animate({
            height: "30px"
        }, 90, function () {

        });
        $("#topNav li").animate({
            padding: "5px 0 0 0"
        }, 90, function () {

        });
    } else if (scrollPosition <= "1") {
        $("#topNav").animate({
            height: "50px"
        }, 90, function () {

        });
        $("#topNav li").animate({
            padding: "15px 0 0 0"
        }, 90, function () {

        });
    }
})

Answer 2

从我所看到的，只要您的鼠标位于滚动条上，即使没有单击/拖动事件，也会调用滚动功能。这可能会给你带来麻烦。

Fiddle here

$(window).scroll(function () {
var scrollPosition = $(document).scrollTop();
    if (scrollPosition > "1") {
      alert('a');
    } else if (scrollPosition <= "1") {
        alert('a');
    }
});

Answer 3

我放弃了，决定使用CSS类，使用转换，它创造了奇迹。现在滚动的作用是添加和删除li元素和nav的类。 Thansk获得所有答案！

jQuery scrollTop仅在使用鼠标

3 个答案: