Question

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

感谢您的帮助

Answer 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
}

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

Answer 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
    }

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

在窗口调整大小removeAttr

3 个答案: