Question

我正在创建一个拥有导航功能的视差网站。页面向下滚动时，导航会更改其颜色。当页面加载导航背景颜色时，弓形是透明的，当页面向下滚动时，它变为白色。

链接在白色背景颜色上有颜色#BBB9BE和悬停颜色#3F4474，但它在透明背景上显示相同的颜色和悬停颜色，这意味着我的else语句无法正常工作。这里的问题是什么？

var a = $(".navbar-default").offset().top;
$(document).scroll(function() {
  if ($(this).scrollTop() > 10) {
    $('.navbar-default').css({ "background": "#fff" }).addClass('after-scroll- nav-border');

    $('.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus ').hover(function() {
      $('.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus ').css({ "color": "#3F4474" });
    }, function() {
      $(".navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus").css({ "color": "#BBB9BE" });
    });
  } else {
    $('.navbar-default').css({ "background": "transparent" }).removeClass('after-scroll-nav-border');

    $('.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus ').hover(function() {
      $('.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus ').css({ "color": "#fff" });
    }, function() {
      $(".navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus").css({ "color": "#BBB9BE" });
    });
  }
});

Answer 1

你在问题中遗漏了一些字眼，所以我不确定我是否完全理解。首先，after-scroll- nav-border之间有一个空格，这可能是你的问题。正如另一篇评论所提到的，每次页面滚动时都会创建.hover()事件。

其次，您考虑使用纯CSS解决方案而不是使用.hover()吗？像这样：

JS

var a = $(".navbar-default").offset().top;
  $(document).scroll(function(){
    if($(this).scrollTop() > 10)
    {
      $('.navbar-default').addClass('after-scroll-nav-border');
    }
    else
    {
      $('.navbar-default').removeClass('after-scroll-nav-border');
    }
  }

CSS

.navbar-default {
  background: transparent;
}

.navbar-default.after-scroll-nav-border {
  background: #ffffff;
}

.navbar-default .navbar-nav>li>a {
  color: #bbb9be;
}

.navbar-default .navbar-nav>li>a:hover, 
.navbar-default .navbar-nav>li>a:focus {
  color: #ffffff;
}

.navbar-default.after-scroll-nav-border .navbar-nav>li>a:hover, 
.navbar-default.after-scroll-nav-border .navbar-nav>li>a:focus {
  color: #3f4474;
}

在页面加载时，将使用默认样式（#bbb9be文本，#ffffff悬停）。一旦页面滚动到10，您就已经添加了一个after-scroll-nav-border类，因此通过创建另一组以该类为基础的样式，您可以获得所需的颜色更改而无需任何不必要的JS。

我希望我能正确理解你的问题。

链接颜色不随视差滚动而变化

1 个答案: