关于窗口大小调整removeAttr
关于窗口大小调整removeAttr
提问于 2015-01-22 12:54:40
上面贴着一个固定的菜单。当我从顶部从1px开始向下滚动页面时，我的固定菜单将改变样式。但当我使网站响应，我调整了我的窗口，最近增加的风格不会解散(在第一次滚动和备份后)。
希望这有点清楚。
这是我的jQuery：
jQuery(document).ready(function(){
var scroll_pos = 0;
var windowWidth = jQuery(window).width();
if (windowWidth > 768) {
jQuery(document).scroll(function() {
scroll_pos = jQuery(this).scrollTop();
if(scroll_pos > 1) {
jQuery("nav").css('background-color', 'black');
jQuery("nav").css('padding', '10px 0px');
jQuery("nav").css('transition', '0.3s ease-in-out all');
} else {
jQuery("nav").css('background-color', 'rgba(0, 0, 0, 0.4)');
jQuery("nav").css('padding', '20px 0px');
jQuery("nav").css('transition', '0.3s ease-in-out all');
}
});
} else {
jQuery(window).resize(function() {
jQuery("nav").removeAttr("style");
});
}
});我的HTML的结构如下：
<div class="toggle">
<img src="images/menu.png">
</div>
<nav>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
</ul>
</nav>谢谢你的帮助
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-01-22 13:03:26
创建新的javascript函数，如下所示：
function resize() {
var scroll_pos = 0;
var windowWidth = jQuery(window).width();
jQuery(document).scroll(function() {
if (windowWidth > 768) {
scroll_pos = jQuery(this).scrollTop();
if(scroll_pos > 1) {
jQuery("nav").css('background-color', 'black');
jQuery("nav").css('padding', '10px 0px');
jQuery("nav").css('transition', '0.3s ease-in-out all');
} else {
jQuery("nav").css('background-color', 'rgba(0, 0, 0, 0.4)');
jQuery("nav").css('padding', '20px 0px');
jQuery("nav").css('transition', '0.3s ease-in-out all');
}
} else {
jQuery("nav").removeAttr("style");
}
});
}然后，当屏幕调整大小时，您可以很容易地调用它。
$(document).ready(function(){
resize();
});
$(window).resize(function(){
resize();
});Stack Overflow用户
发布于 2015-01-22 12:57:35
为什么不直接使用css呢？
@media only screen and (min-width: 768px) {
// CSS style for +768 px
}
@media only screen and (max-width: 768px) {
// CSS style for less 768px
}Stack Overflow用户
发布于 2015-01-22 13:05:32
您可以使用css类和媒体查询来完成此操作。而不是使用jquery添加每个css样式，然后您可以更改类。
css样式：
@media (min-width: 768px) {
.top{
background-color: rgba(0, 0, 0, 0.4);
padding: 20px 0px;
transition: 0.3s ease-in-out all;
}
.scrolled{
background-color: black;
padding: 10px 0px;
transition: 0.3s ease-in-out all;
}
}
@media (max-width: 768px) {
//Style when windows is less than 768px
}javscript滚动函数变成：
$(document).scroll(function(){
scroll_pos = jQuery(this).scrollTop();
if(scroll_pos > 1) {
$("nav").removeClass('top');
$("nav").addClass('scrolled');
} else {
$("nav").removeClass('scrolled');
$("nav").addClass('top');
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28089317
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号