只有一个宽度小于一个宽度，一个宽度高于一个宽度

问题描述：

我想在浏览器大小低于768px时在我的网页上添加页眉标记，并在高于768px时删除它，无论我在多少次之间切换两种尺寸。我创建了下面的代码，如果我使用大小调整窗口，但它工作正常，但如果我手动调整大小，它会不断激发，导致多个标题标记。只有一个宽度小于一个宽度，一个宽度高于一个宽度

我想要它只做一次，如果它低于768px和高于768px一次。

起初我没有我的代码在resize函数里面，但是它只会工作一次，所以如果我增加它大约768px，标题标记消失了，但是如果我再次减小了标题， t重新申请。

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

虽然投答案解决您的问题按规定将采取的方式更少的代码使用CSS媒体查询通过@ guest271314 – j3ff

答

您可以使用css媒体查询

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

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

当。这是一个更好的解决方案。我不知道为什么我没有想到这一点。谢谢 – comfortablyNumb

答

你只是想抖的情况下，有很多方法可以做到这一点，但在这种情况下，一个简单的标志就足够

$(window).data('flag', $(window).width() < 768).on('resize', function() { 
    var width = $(window).width(); 
    var flag = $(this).data('flag'); 

    if (width < 768 && flag) { 
     insertHeader(); 
     $(this).data('flag', false); 

    } else if (width > 768 && !flag) { 
     removeHeader(); 
     $(this).data('flag', true); 

    } 
});

FIDDLE

答

支票头在DOM或不是

if($('header').length < 1){ 

}

你的代码应该看起来像

$(document).ready(function(){ 
    $(window).on('resize', function(){ 
     var width = $(window).width(); 
     if (width < 768) { 
      if($('header').length < 1){ 
      insertHeader(); 
      } 

     } 
     if(width > 767) { 
      if($('header').length >= 1){ 
      removeHeader(); 
      } 
     } 
    }); 
});

DEMO HERE

只有一个宽度小于一个宽度，一个宽度高于一个宽度

相关推荐