Question

我有受{JavaScript影响的<header>和<nav>块。如果用户将窗口大小调整为小于1119像素宽，我希望<nav>块变为position: static。该脚本目前仅适用于页面加载，但不会检测调整大小。

我尝试过应用this question的解决方案，但没有运气。这是指向相关网页的链接：

到目前为止，这是我的JavaScript：

<script>
$(document).ready(function(){
    var $window = $(window);


    function checkWidth() {
        windowsize = $window.width();

        if (windowsize > 1119) {
           $(window).scroll(function() {
                if ($(this).scrollTop()>119)
                {
                    $('header').fadeOut();
                    $('nav').css({position: 'fixed', top: '0px'});
                }
                else
                {
                    $('header').fadeIn();
                    $('nav').css({position: 'absolute', top: 'auto'});
                }
            });
        }
        else {
            $('nav').css({position: 'static', top: '0px'});
        }
    }

    // can trigger the resize handler instead of
    // explicitly calling checkWidth()
    $(window).resize(checkWidth).resize();
});
</script>

Answer 1

使用.trigger()：

$(window).resize(checkWidth)
         .trigger('resize');

尝试关注 demo 。当您打开控制台时，尝试调整控制台日志中的窗口大小应该在您调整大小时输出。

在您的服务器中试用此代码：

$(document).ready(function(){
    var $window = $(window);

    $window.on('resize', function () {
        windowsize = $window.width();

        if (windowsize > 1119) 
        {
            $window.scroll(function() {
                if ($(this).scrollTop()>119)
                {
                    $('header').fadeOut();
                    $('nav').css({position: 'fixed', top: '0px'});
                }
                else
                {
                    $('header').fadeIn();
                    $('nav').css({position: 'absolute', top: 'auto'});
                }
            }).scroll();
        }
        else 
        {
            $('nav').css({position: 'static', top: '0px'});
            $('header').fadeIn();
            $window.off('scroll');
        }
    }).resize();

});

<强> DEMO

Answer 2

在CSS中使用媒体查询（在css中添加某个地方）

@media (max-width: 1119px) {
  nav {position: 'static' !important; opacity: 1 !important;}
}

您可以简化您的js

<script>
$(document).ready(function() {
    $(window).scroll(function() {
        if ($(this).scrollTop()>119) {
            $('header').fadeOut();
            $('nav').css({position: 'fixed', top: '0px'});
        } else {
           $('header').fadeIn();
           $('nav').css({position: 'absolute', top: 'auto'});
        }
     });
});
</script>

滚动功能仍将执行，但不会进行任何视觉更改。这很好，因为它会跟踪更改并在向下滚动后调整大小会做出正确的反应。

Answer 3

您的当前代码仅在文档加载时运行一次。你需要使用类似的东西：

$(window).on('resize', function () {
// your code here

});

所以bind到$(window)

使用JavaScript / jQuery响应窗口大小调整

3 个答案: