我想根据滚动位置和窗口宽度添加/删除一个类。当用户垂直滚动到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
答案 0 :(得分:1)
它很简单。把窗口滚动功能放在窗口滚动功能中。我用这个寡妇滚动延迟加载。但我为高度做到了!希望它有所帮助
$(window).scroll(function () {
var windowsize = $window.width();
if (windowsize >= 1151) {
$('.site-header').addClass('shrink');
}
else {
$('.site-header').removeClass('shrink');
}
});
答案 1 :(得分:1)
我实际上解决了以下问题。这允许连续返回滚动和窗口值。如果有更有效的策略,我很乐意听到任何想法。
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();
}
});