Question

滚动到顶层文档时，我尝试使用我的代码制作透明导航栏（opacity = 0），滚动传递对象时设置为opacity = 1。但似乎代码对我不起作用。有人可以从jsFiddle查看我的代码并解决这个问题吗？ Fiddle

$(document).on('scroll', function (e) {
    var o = $(document).scrollTop() / 500;
    if (o > 1.000) { o = 1;}
    var e = $('nav');
    var currentColor = $('nav').css('background-color');
    var lastComma = currentColor.lastIndexOf(')');
    var newColor = currentColor.slice(0, lastComma - 1) + ", "+ o + ")";
    $('nav').css('background-color', newColor);
});

Answer 1

三件事：

materialize.min.css将background-color应用于。{ !important标记它。自!important flag can override inline styles以来，你将来还需要另一个!important标志来覆盖它内联样式。凌乱，我知道，但我想不出任何其他方式。
您正在从元素中提取rgb（没有alpha）值，但您想要将rgba（带alpha）应用于它。由此产生的newColor 变量需要适应它。
最后，通过.css()申请不会对此有所帮助。我们需要使用.attr()直接应用于style属性，并以字符串格式连接在一起。

以下是我能做的事情：

$(document).on('scroll', function (e) { updateColor(); });

function updateColor() {
  var o = $(document).scrollTop() / 500;
    if (o > 1.000) { o = 1; }
    var e = $('nav');
    var currentColor = e.css('background-color');
    var rgb = currentColor.replace(/^(rgb|rgba)\(/, '').replace(/\)$/, '').replace(/\s/g, '').split(',');
    var newColor = 'rgba(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ',' + o + ')';
    e.attr('style', 'background-color: ' + newColor + ' !important');
}

updateColor();

<强> 段：

＆＃13;

$(document).on('scroll', function (e) { updateColor(); });

function updateColor() {
  var o = $(document).scrollTop() / 500;
    if (o > 1.000) { o = 1; }
    var e = $('nav');
    var currentColor = e.css('background-color');
    var rgb = currentColor.replace(/^(rgb|rgba)\(/, '').replace(/\)$/, '').replace(/\s/g, '').split(',');
    var newColor = 'rgba(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ',' + o + ')';
    e.attr('style', 'background-color: ' + newColor + ' !important');
}

updateColor();

＆＃13;

header, main, footer { padding-left: 0px; }
a.button-collapse { padding-left: 15px; }
a.brand-logo.left-align.hide-on-med-and-down { padding-left: 20px; }
a.brand-logo.left-align.hide-on-small-only.hide-on-large-only { font-size: 1.675rem; }
a.brand-logo.left-align.hide-on-small-only.hide-on-large-only span { font-size: 1.12rem; }
@media only screen and (max-width: 320px) {
  a.brand-logo.left-align.hide-on-med-and-up { font-size: 1.15rem; }
}
@media only screen and (min-width: 321px) {
  a.brand-logo.left-align.hide-on-med-and-up { font-size: 1.25rem; }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<script src="http://materializecss.com/js/init.js"></script>
<header>
  <div class="navbar-fixed" id="top">
    <nav class="orange"> <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
      <a class="brand-logo left-align">Header</a>
      <ul class="right hide-on-med-and-down">
        <li><a class="waves-effect waves-light" id="test">Item 1</a></li>
        <li><a class="waves-effect waves-light">Item 2</a></li>
        <li><a class="waves-effect waves-light">Item 3</a></li>
        <li><a class="waves-effect waves-light">Item 4</a></li>
      </ul>
      <ul class="side-nav left-align" id="mobile-demo">
        <li class="waves-effect waves-red" style="width: 100%;"><a>Item 1</a></li>
        <li class="waves-effect waves-red" style="width: 100%;"><a>Item 2</a></li>
        <li class="waves-effect waves-red" style="width: 100%;"><a>Item 3</a></li>
        <li class="waves-effect waves-red" style="width: 100%;"><a>Item 4</a></li>
      </ul>
    </nav>
  </div>
</header>
<main style="margin-top: -64px;">
  <div style="width: 100%; height: 100vh; min-height:480px; background-color: #ccc; font-size: 3rem; vertical-align: center;">
    <div class="valign-wrapper center-align" style="margin-top: 65px;">
      <div class="valign">Transparent Navbar Section</div>
      <div class="valign grey-text text-darken-" 2 style="">(Opacity = 0%)</div>
    </div>
  </div>
  <p class="navopc-endchange"><u>End Color Opacity Change!(Opacity = 100%)</u></p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</main>

＆＃13;

希望这有帮助。

Answer 2

$(document).on('scroll', function (e) {
    e.preventDefault();
    var o = $(document).scrollTop() / 500;
    if (o > 1.000) { o = 1;}
    var e = $('nav');
    $('nav').css('opacity', o);
});

您需要更改不透明度属性。

Answer 3

我用一些新代码更新了你的小提琴：首先，我用我为其中一个网站编写的更简单的函数完全替换了你的jquery：

//nav snap
$(window).scroll(function(scroll) {
    var navStart = $('.navopc-endchange').offset().top;
    var scroll = $(window).scrollTop();
    if (scroll > navStart) {
        $('nav').addClass('opaque');
    } else {
        $('nav').removeClass('opaque');  
    }
});

当您滚过顶部下方部分的顶部（从您想要透明导航的区域滚动到您想要不透明导航的位置）时，它会在您的导航中添加一个类opaque，并删除如果你向后滚动那个课程。

我还添加了一些新的CSS：

nav {opacity:0;transition:opacity 0.3s;}
nav.opaque {opacity:1;}

这个CSS只添加了opacity:0＆amp;的属性。 opacity:1和nav的{{1}}然后我创建了一个转换，让它在0.3秒内很好地淡出。

http://jsfiddle.net/66xjehgt/5/

滚动到文档顶部时如何制作透明导航栏

3 个答案: