Bootstrap 4 – 导航栏品牌标志在向下滚动时不会更改

huangapple go评论80阅读模式
英文:

bootstrap 4 - navbar brand logo not change in scroll down

问题

我添加了 Bootstrap 4 并创建了导航栏,它正常工作,但我遇到了一些冲突,我尝试在滚动时更改导航栏的徽标,但它没有正常工作,有人知道如何修复这个问题。

这是我的代码:

<!-- language: lang-css -->
$(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 1000) {
            $('.navbar .navbar-brand img').attr('src','https://via.placeholder.com/150/FF00FF/808080?Text=newLogo');
        }
        if ($(this).scrollTop() < 1000) {
            $('.navbar .navbar-brand img').attr('src','https://via.placeholder.com/150/0000FF/808080?Text=oldLogo');
        }
    })
});

<!-- language: lang-html -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<header class="main_menu home_menu">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-12">
                <nav class="navbar navbar-expand-lg navbar-light">
                    <a class="navbar-brand"><img src="https://via.placeholder.com/150/0000FF/808080?Text=oldLogo" style="width:50px;"></a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                </nav>
            </div>
        </div>
    </div>
</header>

<section>
    <div>占位符</div>
    <!-- 其他占位符 -->
</section>

希望这有助于解决你的问题。

英文:

I added bootstrap 4 and I created the navbar, it is working good, but i have some conflict I tried to change when the scroll down change the navbar logo, but its not working correctly, anyone know how to fix that issue.
<br><br>This is my code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() &gt; 1000) {
$(&#39;.navbar .navbar-brand img&#39;).attr(&#39;src&#39;,&#39;https://via.placeholder.com/150/FF00FF/808080?Text=newLogo&#39;);
}
if ($(this).scrollTop() &lt; 1000) {
$(&#39;.navbar .navbar-brand img&#39;).attr(&#39;src&#39;,&#39;https://via.placeholder.com/150/0000FF/808080?Text=oldLogo&#39;);
}
})
});

<!-- language: lang-html -->

&lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css&quot; integrity=&quot;sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-3.2.1.slim.min.js&quot; integrity=&quot;sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js&quot; integrity=&quot;sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js&quot; integrity=&quot;sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;header class=&quot;main_menu home_menu&quot;&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;row align-items-center&quot;&gt;
&lt;div class=&quot;col-lg-12&quot;&gt;
&lt;nav class=&quot;navbar navbar-expand-lg navbar-light&quot;&gt;
&lt;a class=&quot;navbar-brand&quot; &gt; &lt;img src=&quot;https://via.placeholder.com/150/0000FF/808080?Text=oldLogo&quot; style=&quot;width:50px;&quot;&gt;   &lt;/a&gt;
&lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
&lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
&lt;/button&gt;&lt;/nav&gt;
&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/header&gt;
&lt;section&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;  &lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;  &lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;/section&gt;

<!-- end snippet -->

答案1

得分: 1

请查看下面的示例。它正常工作。只是您的图像在滚动时被隐藏,否则您的图像会发生变化。

请注意,出于说明目的,我已经固定了您的navbar标题。

只需为您的导航栏使用navbar navbar-expand-lg navbar-light fixed-top类,它应该按预期工作。

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->
$(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 1000) {
            $('.navbar .navbar-brand img').attr('src','https://via.placeholder.com/150/FF00FF/808080?Text=newLogo');
        }
        if ($(this).scrollTop() < 1000) {
            $('.navbar .navbar-brand img').attr('src','https://via.placeholder.com/150/0000FF/808080?Text=oldLogo');
        }
    })
});

<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<header class="main_menu home_menu">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-12">
        <nav class="navbar navbar-expand-lg navbar-light fixed-top">
                    <a class="navbar-brand" > <img src="https://via.placeholder.com/150/0000FF/808080?Text=oldLogo" style="width:50px;">   </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button></nav>
      </div></div></div></header>

<section>
  <div>Placeholder</div>
  <!-- 这里有很多占位符 -->
</section>

<!-- end snippet -->

注意:上述代码是一个示例,用于说明目的。根据您的实际需求,您可能需要自定义一些部分。

英文:

Check out below fiddle. It is working fine. It is just that your image is getting hidden under scroll otherwise your image is getting changed.

Please note, for illustration purposes, I have fixed your navbar header.

Just use navbar navbar-expand-lg navbar-light fixed-top classes for your navbar and it should work as expected.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() &gt; 1000) {
$(&#39;.navbar .navbar-brand img&#39;).attr(&#39;src&#39;,&#39;https://via.placeholder.com/150/FF00FF/808080?Text=newLogo&#39;);
}
if ($(this).scrollTop() &lt; 1000) {
$(&#39;.navbar .navbar-brand img&#39;).attr(&#39;src&#39;,&#39;https://via.placeholder.com/150/0000FF/808080?Text=oldLogo&#39;);
}
})
});

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css&quot; integrity=&quot;sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-3.2.1.slim.min.js&quot; integrity=&quot;sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js&quot; integrity=&quot;sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js&quot; integrity=&quot;sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;header class=&quot;main_menu home_menu&quot;&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;row align-items-center&quot;&gt;
&lt;div class=&quot;col-lg-12&quot;&gt;
&lt;nav class=&quot;navbar navbar-expand-lg navbar-light fixed-top&quot;&gt;
&lt;a class=&quot;navbar-brand&quot; &gt; &lt;img src=&quot;https://via.placeholder.com/150/0000FF/808080?Text=oldLogo&quot; style=&quot;width:50px;&quot;&gt;   &lt;/a&gt;
&lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
&lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
&lt;/button&gt;&lt;/nav&gt;
&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/header&gt;
&lt;section&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;div&gt;Placeholder&lt;/div&gt;
&lt;/section&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2020年1月6日 19:04:41
  • 转载请务必保留本文链接:https://go.coder-hub.com/59610953.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定