在窗口调整大小时删除属性

On window resize removeAttr

本文关键字：删除 属性 小时 窗口 调整      更新时间：2023-09-26

我有一个固定的菜单粘在顶部。当我从顶部从 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>

感谢您的帮助

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

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

您可以使用 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');
    }
}
相关文章：