Question

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

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

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

提前感谢您的帮助！

有效的滚动功能：

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

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

}）;

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

2 个答案: