如何使滚动到文档顶部时透明导航栏
How to make transparent navbar when scroll to top of document
>我尝试使用我的代码在滚动到顶部文档时使透明导航栏(不透明度= 0(,并在滚动传递对象时设置为不透明度= 1。但似乎代码对我不起作用。有人可以从jsFiddle查看我的代码并解决此问题吗?小提琴
$(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);
});
三件事:
-
materialize.min.css
应用background-color
带有!important
旗帜与它。而且由于!important
标志可以覆盖内嵌样式,你应用时需要另一个!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();
片段:
$(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();
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; }
}
<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>
希望这有帮助。
$(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);
});
您需要更改不透明度属性。
我用一些新代码更新了你的小提琴:首先,我用我为我的一个网站编写的更简单的函数完全替换了你的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只是为nav
和nav.opaque
添加了opacity:0
和opacity:1
的属性,然后我创建了一个过渡,使其在0.3秒内很好地淡入淡出。
http://jsfiddle.net/66xjehgt/5/
相关文章:
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- angular 1.5应用程序中的导航栏
- 无法从jquery Mobile导航栏重定向到另一个页面
- Bootstrap 3粘贴导航条在滚动和重叠内容时变得透明且不可点击
- 如何使导航栏透明,然后使用bootstrap 3更改颜色.(粘贴)
- 由视频覆盖的引导导航栏 - 如何用不透明背景覆盖它
- 滚动上的导航栏透明
- 导航图像在页面加载时保持透明
- 当到达定位点时,使导航栏透明
- 向下滚动时隐藏透明固定导航栏下的内容
- 我怎么能让一个粘性导航条在英雄的底部看起来透明,然后再固定在顶部
- CSS垂直导航菜单,带有水平子菜单和半透明带
- 仅当导航栏位于页面顶部时使其透明,然后在滚动时使其背景为纯背景
- 我如何添加导航箭头上的“JQuery照片滑块与半透明标题”
- 透明导航条,滚动时可见
- 100%导航条与透明的脉冲为末端和重复模式
- 在滚动或到达页面上的某个点时,导航栏从透明变为白色
- 如何使固定导航条透明基于页面滚动
- 如何使滚动到文档顶部时透明导航栏
- 如何使引导导航栏背景有一个透明的淡出到网页