Question

我正在尝试制作一个导航栏，当我向下滚动一点时会更改其图像/徽标，背景色和字体颜色，但是到目前为止我没有尝试过

还希望我向下滚动时显示的图像具有与上一个相同的宽度和高度

Js：

links = main_table.find_all("article")

Answer 1

确定您已正确导入了jquery，它可以在我的计算中使用。

Answer 2

我一直在进行测试，所以我建议您这样做：

$(function() {
    var header = $(".header");
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
    
        if (scroll >= 200) {
            header.removeClass('header').addClass("header-alt");
        } else {
            header.removeClass("header-alt").addClass('header');
        }
    });
});

.header {
  height: 200px; 
  background-color: rgba(0,0,0,0.5);
  position: fixed;
  top: 200;
  width: 100%;
  transition: all 0.5s;
}
.header img {
  background: url(https://www.w3schools.com/tags/smiley.gif) no-repeat;
}
.header-alt {
  height: 100px;
  background-color: rgba(0,0,0, 0.8);
  position: fixed;
  top: 200;
  width: 100%;
  transition: all 0.5s;
  color: blue;
}

.header-alt img{
  background: url(https://www.w3schools.com/html/pic_trulli.jpg) no-repeat;

}


.otherSection {  
  height: 2000px;
  padding-top: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="header">
    <img class="img" width="42" height="42">
    <h1>I'm a navigation bar<h1/>
</header>

<div class="otherSection">
  Hello World
</div>

Answer 3

正如其他人所提到的那样，您不是在代码笔中导入jQuery，因此您在此处编写的代码将无法工作。通过包含它，您应该看到徽标更改；但是scrollTop() > 1000太多了，也许将其缩小为50，滚动后您会看到徽标的图像实际上发生了变化

$(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 50) {
      $('.navbar .navbar-brand img').attr('src', 'https://www.luatix.org/wp-content/uploads/2018/12/logo_menu_text.png');
    }
    if ($(this).scrollTop() < 50) {
      $('.navbar .navbar-brand img').attr('src', 'https://www.luatix.org/wp-content/uploads/2018/12/logo_menu_text_white.png');
    }
  })
});

$(function() {
  $(document).scroll(function() {
    var $nav = $(".navbar-brand");
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
  });
});

body {
  font: 15px/1.5 Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
  background-color: #f4f4f4;
}


/* Global */

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

ul {
  margin: 0;
  padding: 0;
}


/* Header **/

header {
  background-color: #00695c;
  color: #ffffff;
  padding-top: 30px;
  min-height: 70px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

header a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
}

header li {
  float: left;
  display: inline;
  padding: 0 20px 0 20px;
}

header #branding {
  float: left;
}

header #branding h1 {
  margin: 0;
}

header nav {
  float: right;
  margin-top: 10px;
}

header .highlight,
header .current a {
  font-weight: bold;
}

header a:hover {
  color: #cccccc;
  font-weight: bold;
}

.navbar-brand.scrolled {
  background-color: #fff;
  transition: background-color 200ms linear;
}

<!-- Make sure to add this import -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<header class="navbar">
  <div class="container">
    <div id="branding" class="navbar-brand">
      <img src="https://www.luatix.org/wp-content/uploads/2018/12/logo_menu_text_white.png" alt="" width="123" height="50" style="height:100%;">
    </div>
    <nav>
      <ul>
        <li><a href="about.html">Blog</a></li>
        <li><a href="services.html">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

<div class="space" style="height:1400px;"></div>

Answer 4

您需要导入jQuery。这是您需要的代码：这是他们的苗条/分钟核心链接。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>

导航栏无法正常运行

4 个答案: