JQuery Add/remove class 动态基于滚动位置和 window 宽度

Question

我想 add/remove 基于滚动位置和 window 宽度的 class。当用户垂直滚动经过 X 且 window 宽度大于 Y 时，应添加 class。如果不满足这两个条件，则应删除 class。如果用户滚动回到顶部，class 也应该被删除。

滚动位置和 window 宽度值都必须是动态的，因此这些值是连续测量的。

基本上，我需要组合以下每个独立工作的功能。

在此先感谢您的帮助！

有效的滚动功能：

 jQuery(function($){
  var shrinkHeader = 200;  // 
  // Add dynamic header class    
  $(window).scroll(function () {
    var scroll = getCurrentScroll();
      if ( scroll >= shrinkHeader) {
        $('.site-header').addClass('shrink');
      }
      else {
        $('.site-header').removeClass('shrink');
    }
  });

有效的宽度函数：

jQuery(function($){
var shrinkHeader = 200;  
var $window = $(window);    
function checkWidth() {   
    var windowsize = $window.width();
    if (windowsize >= 1151) {
        $('.site-header').addClass('shrink');
    }
    else {
        $('.site-header').removeClass('shrink');
    }

 }  
 checkWidth(); // Check window width on load
 $(window).resize(checkWidth);  // Check window width on resize

Answer 1

很简单。将寡妇宽度条件放在 window 滚动函数中。我将其用于寡妇滚动延迟加载。但我这样做是为了身高！希望对你有帮助

$(window).scroll(function () {
var windowsize = $window.width();
if (windowsize >= 1151) {
    $('.site-header').addClass('shrink');
}
else {
    $('.site-header').removeClass('shrink');
}
});

Answer 2

我实际上解决了下面的问题。这允许连续返回 scroll AND window 值。如果有更有效的策略，很想听听任何想法。

jQuery(function($){
var shrinkHeader = 200;  // Scroll value

// Add/Remove dynamic header class .shrink on scroll 
$(window).scroll(function () {
    var scroll = getCurrentScroll();
    var windowWidth = getCurrentWidth();    
        if (scroll >= shrinkHeader && windowWidth >= 1151) {
            $('.site-header').addClass('shrink');
        }
        else {
            $('.site-header').removeClass('shrink');
        }
});

// Add/Remove dynamic header class .shrink per window width
$(window).resize(function () {
    var windowWidth = getCurrentWidth();    
    var scroll = getCurrentScroll();
    if (windowWidth >= 1151 && scroll >= shrinkHeader) {
            $('.site-header').addClass('shrink');               
        }
        else {
            $('.site-header').removeClass('shrink');
        }
}); 

// Check current scroll position
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
}

// Check window width on load
getCurrentWidth(); 

// Return window width
function getCurrentWidth() {
    return $(window).width();
}

});

JQuery Add/remove class 动态基于滚动位置和 window 宽度

JQuery Add/remove class dynamically based on scroll position AND window width

jquery

scroll

window

width