使用页面滚动更改标题背景时出现问题

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (6)

我正在实现一个固定的透明标题,当页面滚动超过100像素时会变黑。

目前,在main.js我有一个功能:

// Header scroll class
   $(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
     $('.header').addClass('header-scrolled');
    } else {
      $('.header').removeClass('header-scrolled');
    }
  });

在main.css我有:

/*-------
# Header
---------*/
#header {
  padding: 3px 0;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  transition: all 0.5s;
  z-index: 997;
  background-color: transparent;
}

.header-scrolled {
  background-color: black;
}

并且html页面的格式如下:

<header id="header" id="home">
  <div class="container">
     <li class="row align-items-center justify-content-between d-flex">
       <div id="logo">
         <a href="home.html"><img width="160" height="160" src="{% static 
         'img/my_logo.png' %}" alt="" title="" /></a>
       </div>
       <nav id="nav-menu-container">
         <ul class="nav-menu">
           <li class="menu-active"><a href="#home">{% trans "Home" %}</a> 
           </li>
           <li class="menu-active"><a href="#contacts">{% trans "Contacts" 
           %}</a></li>
         </ul>
       </nav>
     </li>
   </div>
</header>

目前,标题是固定且透明的。然而,当我向下滚动时,它不会变黑(尽管在检查器中似乎正在添加标题滚动)。我似乎无法找到问题的任何解决方案(没有提供类似问题的其他建议工作)...也许我错过了什么?

提问于
用户回答回答于

希望它会有所帮助。

#header.header-scrolled {
  background-color: black;
}

热门问答

关于web表情包集成?

最爱开车啦互联网的敏感者
推荐
表情使用方式有两种方式: 1)是使用 TIMFaceElem 中的 index,标识表情的索引,比如 Android 和 iOS 两端都有同一套表情图,索引2为笑脸,index=2 就表示笑脸,两端发送和接收都显示同一张索引表情图片即可。 2 ) 是使用 TIMFaceElem ...... 展开详请

如何将本地的.json格式的文件部署到服务器上, 通过url请求?

使用 CDS-Mask 做数据合作,怎么确保双方都不能反推对方的 ID?

用户2134289

腾讯科技 · 高级工程师 (已认证)

推荐
您好,两种方案可以解决您的需求 1)如果您这边ID不需要在业务上使用,将ID进行加星脱敏即可,加星后的所有数据字符将变为*,无法还原; 2)如果您这边ID在业务上需要使用,也就是ID在处理后必须保持唯一性,那么需要采用腾讯数港算法解决该问题,数港算法目前灰度中,如需要申请,烦请通...... 展开详请

cos.sliceUploadFile支持断点续传吗?

如果用的是 cos-js-sdk,那么 cos.restartTask 是会断点续传的,用法没有问题。 PS: sdk 使用可以参考 demo.js https://github.com/tencentyun/cos-js-sdk-v5/blob/master/demo/demo...... 展开详请

数据万象持久化在JavaScript SDK中的问题?

可以的,有Domain参数。请参考:https://github.com/tencentyun/cos-js-sdk-v5/blob/master/csp/csp.html#L56

有谁用unity 3d 实现过对象的上传储存和者下载?

我不是米

腾讯 · 工程师 (已认证)

对象存储工程师
推荐

请正确填写bucket参数,bucket参数里面不要带上-appid

所属标签

扫码关注云+社区

领取腾讯云代金券