我有这个 jquery 代码。我只需要在 > 950px 的分辨率下执行。 如果不是，我会丢失响应式 Logo 。 我想做类似联想主页导航栏的事情。
$(document).ready(function(){
//left side menu functions End
//Logo function
$(document).scroll(function() {
if ($(document).scrollTop() < 25) {
$("div.logo").height(200);
$('div.logo a').css('background-image', 'url(img/logo-clear.png)');
} else {
$("div.logo").height(50);
$('div.logo a').css('background-image', 'url(img/logo-sm.png)');
}
});
});
最佳答案
您可以添加和删除 css，而不是更改 css，就像这样
$(document).ready(function(){
$(document).scroll(function() {
if(window.innerWidth > 950){
if ($(document).scrollTop() < 25) {
$('.logo').addClass('logo-clear');
} else {
$('.logo').removeClass('logo-clear');
}
}
});
});body{
height: 150vh;
}
.logo{
background-color: green;
width: 500px;
height: 500px;
}
.logo a{
height: 50px;
}
.logo.logo-clear{
background-color: yellow;
}
.logo.logo-clear a{
height: 200px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="logo">
<a href="">hello</a>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>请注意，为了可视化目的，我添加了一些额外的 CSS。也可以在这里查看https://output.jsbin.com/viqebo
关于javascript - 我只需要在窗口滚动时以特定分辨率执行 jquery 代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42423581/