javascript - 仅在宽度下方预置一次，在宽度上方预置一次

Question

当浏览器大小低于 768px 时，我想在我的网页前添加一个标题标记，而当浏览器大小超过 768px 时将其删除，无论我在两种大小之间切换多少次。我创建了下面的代码，如果我使用大小调整窗口，它工作正常，但如果我手动调整它的大小，它就会不断触发，导致多个标题标记。

如果它低于 768px 和高于 768px 一次，我希望它只触发一次。

起初我没有在调整大小函数中使用我的代码，但后来它只能工作一次，所以如果我将它增加大约 768 像素，标题标签就会消失，但如果我再次减小大小，标题不会重新申请。

$(document).ready(function (){
    $(window).on('resize', function(){
        var width = $(window).width();
        if (width < 768) {
            insertHeader();
        }
        if(width > 767) {
            removeHeader();
        }
    });
});

//Function to add header
function insertHeader() {
    var headerTag = $("body").prepend(
                    "<header class='container container-style'> \
                        <div class='row'> \
                            <div class='col-xs-12'> \
                                <a href='#'><img class='img-responsive'  \
                                    src='img/dreamstime_s_52258696.jpg' alt='cartoon drawing of 1965 GTO'></a> \
                            </div>  \
                        </div> \
                    </header>");
    return headerTag
}

function removeHeader() {
    var headerTag = $("header").remove();
    return headerTag;   
}

Answer 1

你可以使用css媒体查询

@media (max-width: 768px) {
  .container {
    display: none;
  }
}

plnkr http://plnkr.co/edit/BsL71H91RVFgG3gUDexa?p=preview