Question

我正在使用adtile的固定响应导航（demo here）用于网站。它完美地工作，除了一件事：我希望标题背景颜色首先是透明的，然后在向下滚动到About部分时淡入。如果可能，当关于链接颜色更改时，标题背景应该具有100％不透明度。我真的迷失了如何使这项工作，所以任何帮助将不胜感激！

我制作了一个jsfiddle here，但是有很多Javascript，所以在GitHub here上查看回购可能会更容易。

HTML：

ApplicationUser

CSS：

IdendtityDbContext

JAVASCRIPT：

Stackoverflow上有太多代码行。请参阅GitHub here上的Javascript文件。

Answer 1

你绝对可以使用Skrollr实现这一目标。但是，我希望其他人能找到一个不依赖于此的解决方案。

https://github.com/Prinzhorn/skrollr

您可以在设定的滚动高度/位置上轻松缓解不透明度/颜色变化。所以它会做你想要的完美。演示https://prinzhorn.github.io/skrollr/有一个关于页面中间的一个很好的例子。

Answer 2

尝试使标题背景最初透明，并在滚动时在标题上添加类。

$(window).scroll(function() {    
 var scroll = $(window).scrollTop();

 if (scroll >= 800) {
    $("header").addClass("darkHeader");
 } else {
    $("header").removeClass("darkHeader");
 }
});

根据您的要求设置新课程。希望这是你正在寻找的。

Answer 3

你可以通过JQuery做到这一点，只需先将任何一个类添加到家庭链接，即“家庭＆＃39; <li class="menu-item home active"><a href="#home" data-scroll>Home</a></li>然后在滚动时检测它是否处于活动状态时将类添加到标题

示例

$(window).scroll(function(){
  if ($(".menu-item.home").hasClass("active")) {
      $("header").addClass("default-header")
  }else {
      $("header").removeClass("default-header")
  }
})

比

.default-header{
// your css code here for default/home section header
}

在滚动上设置响应式固定导航

3 个答案: