Question

我有一个网站，我在滚动时使用两个不同的徽标，但如果屏幕小于1024px，我只使用一个。

一切都按预期工作，除了屏幕调整大小，这打破了。它没有显示标题上的任何徽标，但如果我刷新页面，它就可以...

这是我的代码：

HTML

<div class="container clearfix" >
      <h2 id="logo"><a rel="home" href="#">LOGO ONE</a></h2>
      <h2 id="logo2"><a rel="home" href="#"><span>LOGO</span> <br/>TWO</a></h2>
</div>

JS

$(document).ready(function() {
    //Main menu animation
    $(function () {
    if($(window).width() >= 1023){
        var targetOffset = $("#section--4").offset().top;
        var $w = $(window).scroll(function() {
        if ( $w.scrollTop() + 200 > targetOffset ) {   
            $("#logo").fadeIn(1000);
            $("#logo2").fadeOut('slow');
            $("header").css({"overflow": "hidden"});
        } else {
            $("#logo2").fadeIn(2000)
            $("#logo").fadeOut('slow');
            $("header").css({"overflow": "visible"});
        }
    });
    }
});

Answer 1

只需使用@media screen and (min-width: 1024) { logo { display: none; }}隐藏徽标即可。你根本不需要JS来处理可见问题。您也可以执行此操作object.addEventListener("resize", myScript);

Answer 2

你需要在窗口调整大小时触发事件并运行你的代码，你所做的就是在页面加载时运行代码

$(window).on('resize', function() {
  // call your function here
});

请参阅代码段：

function myfunction() {
  if ($(window).width() >= 1023) {
    var targetOffset = $("#section--4").offset().top;
    var $w = $(window).scroll(function() {
      if ($w.scrollTop() + 200 > targetOffset) {
        $("#logo").fadeIn(1000);
        $("#logo2").fadeOut('slow');
        $("header").css({
          "overflow": "hidden"
        });
      } else {
        $("#logo2").fadeIn(2000)
        $("#logo").fadeOut('slow');
        $("header").css({
          "overflow": "visible"
        });
      }
    });
  }
};

$(document).ready(function() {
  myfunction();
});
$(window).on('resize', function() {
  myfunction();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container clearfix">
  <h2 id="logo"><a rel="home" href="#">LOGO ONE</a></h2>
  <h2 id="logo2"><a rel="home" href="#"><span>LOGO</span> <br/>TWO</a></h2>
</div>

Answer 3

这是因为在滚动之前调用处理窗口宽度的代码意味着当窗口调整大小时，徽标将保持不变，直到我在浏览器中刷新页面并重新加载代码。要解决此问题，请使用jQuery的$(element).resize()处理程序来解决此问题。另一种解决方案是使用最大宽度为1024px

的ccs媒体查询

文档链接

https://api.jquery.com/resize/

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 4

您目前拥有的JS代码只会在页面加载时触发，因为您正在使用

$(document).ready(function() {
    //Main menu animation
});

jQuery有.resize()事件处理程序，它将在浏览器窗口调整大小时触发，因此我建议使用以下代码，如果你真的想坚持使用JS解决方案。虽然我发现在这种特定情况下媒体查询的使用更好/更顺畅：

$( window ).resize(function() {
   //Main menu animation
   $(function () {
    if($(window).width() >= 1023){
       var targetOffset = $("#section--4").offset().top;
       var $w = $(window).scroll(function() {
       if ( $w.scrollTop() + 200 > targetOffset ) {   
         $("#logo").fadeIn(1000);
         $("#logo2").fadeOut('slow');
         $("header").css({"overflow": "hidden"});
       } else {
         $("#logo2").fadeIn(2000)
         $("#logo").fadeOut('slow');
         $("header").css({"overflow": "visible"});
       }
    });
   }
});

希望它可以帮到你

Answer 5

我不能强调你应该对媒体查询做多少这样做，正如谢格尔所说的那样。

可以使用JS和事件处理程序完成，但CSS @media查询将是您的朋友。

Answer 6

如果您想响应窗口调整大小，可能需要收听resize jQuery event。

那就是说，我的建议是使用媒体查询在css中管理它。要做到这一点，请看一下这个答案：@media queries and image swapping

JS打破窗口调整大小

6 个答案: