在窗口调整大小 removeAttr答案

【问题标题】：On window resize removeAttr在窗口调整大小 removeAttr
【发布时间】：2015-03-21 06:38:45
【问题描述】：

我有一个固定在顶部的菜单。当我从顶部开始向下滚动页面 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>

感谢您的帮助

【问题讨论】：

附带问题：html <nav> 是什么？它是有效的 html 5 标签吗？
把这个函数放在$(window).resize(function() {});里面就可以了，因为ready做的是它在页面加载时检查窗口的大小，而不是在你调整它的大小时。
@reporter: w3schools 说它是在 html5 中引入的。或here，如果您更喜欢“更高级”的示例
@ctf0：我试过了，但还是一样（我会更新，这样你就可以看到我做了什么）。谢谢你。
@JeroenBellemans：关于您的问题，这不应该是媒体查询（即在您的 css 中吗？）

标签： javascript jquery html css

【解决方案1】：

为什么不直接使用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
}

【讨论】：

这行不通，因为#引用了一个id为nav的html对象，而不是一个标签。

【解决方案2】：

创建一个新的 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();
});

【讨论】：

谢谢！这对我有用:) +1 EDITED[如果我只有 15 声望] :D
我现在遇到了另一个问题。当我调整窗口大小时，问题就解决了。但是每次我向下和向上滚动时，透明背景都会返回，直到我再次调整窗口大小。有什么建议吗？
翻转 jQuery(document).scroll 行的方法，以及它上面的 if！检查滚动事件内的宽度，因为现在滚动事件已附加到 jQ 并播放每一步，因为您加载的页面宽度大于 768。如果以较小的分辨率加载它，这部分代码将完全停止工作。您不能仅在某些自定义情况下（不是这样）在 if 中定义事件。

【解决方案3】：

您可以使用 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
    }

javascript 滚动功能变为：

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

【讨论】：

是的，我的方法不是应该的，谢谢你的回复，我试试看！ :)