JQuery根据滚动位置和窗口宽度动态添加/删除类答案

【问题标题】：JQuery Add/remove class dynamically based on scroll position AND window widthJQuery根据滚动位置和窗口宽度动态添加/删除类
【发布时间】：2015-04-27 01:44:31
【问题描述】：

我想根据滚动位置和窗口宽度添加/删除一个类。当用户垂直滚动超过 X 并且窗口宽度大于 Y 时，应添加该类。如果不满足这两个条件，则应删除该类。如果用户滚动回顶部，则该类也应该被删除。

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

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

提前感谢您的帮助！

有效的滚动功能：

 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

【问题讨论】：

标签： jquery scroll window width

【解决方案1】：

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

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

【讨论】：

感谢您的 cmets IIa。这似乎不会连续轮询窗口宽度，我需要同时满足宽度和滚动条件。比如，if (scroll >= shrinkHeader && windowssize >= 1151) { 我误解你的方法了吗？
是的，我的代码的意思是，当 scolling 时它会检查宽度条件。我使用类似类型的代码来表示高度。延迟加载，对我来说很好用！

【解决方案2】：

我实际上解决了以下问题。这允许连续返回滚动和窗口值。如果有更有效的策略，我很想听听任何想法。

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();
}

});

【讨论】：