Question

我有这样的缩小标题的代码（后面跟着“else”命令，但它并不重要）。它工作得很好，但是当我刷新已经滚动的页面时，我必须再次滚动才能触发更改。当页面已经滚动刷新时，如何更改并显示正确的缩小版本？提前感谢您的建议。

 var shrinkHeader = 50;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= shrinkHeader || scrollTop() >= shrinkHeader) {
$('.pasek-mini').hide();
 $('.pasek-mini').addClass('pasek-miniu').removeClass('pasek-mini');
$('.pasek-miniu').show();     
 }

Answer 1

在页面加载和滚动后，您的滚动位置都会进行比较，并使标题缩小魔术。

function shrinkHeaderIfScrolled() {
    var scroll = getCurrentScroll();
    var shrinkHeader = 50;
    if ( scroll >= shrinkHeader || scrollTop() >= shrinkHeader) {
        $('.pasek-mini').hide();
        $('.pasek-mini').addClass('pasek-miniu').removeClass('pasek-mini');
        $('.pasek-miniu').show(); 
    }
}

$(document).ready(function() {
    shrinkHeaderIfScrolled();

    $(window).scroll(function() {
        shrinkHeaderIfScrolled();
    }
});

这假设您在某个地方定义了getCurrentScroll()函数和scrollTop()函数，因为您将它们包含在代码示例中。

否则你可以使用：

function shrinkHeaderIfScrolled() {
    var shrinkHeader = 50;
    if ($(window).scrollTop() >= shrinkHeader) {
        $('.pasek-mini').hide();
        $('.pasek-mini').addClass('pasek-miniu').removeClass('pasek-mini');
        $('.pasek-miniu').show(); 
    }
}

$(document).ready(function() {
    shrinkHeaderIfScrolled();

    $(window).scroll(function() {
        shrinkHeaderIfScrolled();
    }
});

刷新和缩小标题

1 个答案: