个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在尝试创建导航栏，当用户不在页面顶部时，该导航栏会淡出至 80% 的不透明度。我已经设法让滚动和相应的 CSS 更改正常工作，但我不确定是否会褪色。我尝试过 .fadeTo() ，它似乎将不透明度降低到 0，然后再次淡入导航栏，而不是从 100% 更改为 80%。
$('document').ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 0) {
$('.top-navigation').css("background","rgba(53,61,64,0.8)")
} else {
if (scroll == 0) {
$('.top-navigation').css("background","rgba(53,61,64,1)")
}
}
});
});
有什么想法吗？非常感谢!
最佳答案
你愿意吗使用 CSS 进行淡入淡出？
CSS
.topnavigation {
opacity: 1;
transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-webkit-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
}
.scrolled .topnavigation { opacity:0.5; }
然后是 JS/jQuery(添加/删除类)
;(function() {
/* this is the scroll */
var _html = $('html');
$(window).scroll(function(){
var _scroll = $(window).scrollTop();
if (_scroll > 0) { _html.addClass('scrolled'); }
else { _html.removeClass('scrolled'); }
});
})();
可以看到这个 running here - 因为“滚动”类已添加到 <html>标签，它现在也可以用在其他领域/CSS 中；
正如您的评论，是的，您可能希望对滚动更加友善(对于这种情况来说还不错) - 但如果是这样，这将使该功能仅在滚动停止时触发。
var _html = $('html'), var kinder;
$(window).scroll(function(){
/* stop the function running until stop */
clearTimeout(kinder);
kinder = setTimeout(function() {
var _scroll = $(window).scrollTop();
if (_scroll > 0) { _html.addClass('scrolled'); }
else { _html.removeClass('scrolled'); }
},300);
});
编辑:更新一半不透明度为q
关于javascript - RGBA 颜色变化褪色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22730056/
24
4
0
在 golang 颜色包中，有一种方法可以从 RGBA 中获取 r,g,b,a 值对象: func (c RGBA) RGBA() (r, g, b, a uint32) { r = uint
我有一个 OpenGL RGBA 纹理，并使用帧缓冲区对象将另一个 RGBA 纹理传输到它上面。问题是，如果我使用通常的混合函数 glBlendFunc(GL_SRC_ALPHA, GL_ONE_MI
假设我有: 和一些CSS: .dark {background:rgba(10,10,10,0.8);} .lite {background:rgba(200,200,200,0.5)
我正在寻找一种更有效的方法，将在预乘色彩空间中存储为 double 的 RGBA 转换为 8 位整数/ channel RGBA 非预乘色彩空间。这对我的图像处理来说是一项巨大的成本。 对于一个 ch
我需要将 PNG H*W*4 rgba 图像转换为形状为 H*W*3 的 rgb 图像. 我可以做到这一点，但是当我保存它时，图像会再次保存为H*W*4这是代码片段: for idx, image i
我有一个 SCSS 文件，这里是它的一部分。SCSS: $red: 200; $green: 200; $blue: 200; $opa: 1; .th-layout-class{ backg
我尝试使用 libpng 库，但遇到了问题。 我现在正在使用 CLion，并尝试在我的项目中包含这个 libpng 库。问题在于配置该库以在我的项目中使用它而不是使用该库。我认为我可以将 libpng
csslint 警告回退背景(十六进制或 RGB)应该在 RGBA 背景之前。"evidence="background: rgba(0, 0, 0, 0.8);/* FF3+,Saf3+,Opera
你应该使用 rgba(0, 0, 0, 0) 还是 rgba(255, 255, 255, 0) 在 CSS 中实现透明度？ 各自的优缺点是什么？ 最佳答案 rgba() 函数的最后一个参数是“alp
掩码 CSS #mask { background-color: rgba(0, 0, 0, 0.8); position: fixed; left: 0; top:
我现在有类型不清楚的图片，他可能是jpeg gif，我想将其转换为image.Image，我该怎么办？ 下面是我的代码 func imageToPng(img image.Image) (image.
我正在尝试创建导航栏，当用户不在页面顶部时，该导航栏会淡出至 80% 的不透明度。我已经设法让滚动和相应的 CSS 更改正常工作，但我不确定是否会褪色。我尝试过 .fadeTo() ，它似乎将不透明度
我必须自定义一个 iOS 应用，指南说: Please don’t use RGBA values in 0 to 255 decimal notation, but use 0.0 to 1.0 a
HTML 代码: Hello CSS 代码: .item img:hover { background: rgba(0, 0, 0, 0.8) } 当我将鼠标悬停在图像上
我在深色背景上为字母添加了 rgba 颜色，并且在 Chrome (67) 中它周围有一个非常小的白色轮廓。我强加了一个 outline: none 但没有任何改变。 body { backgrou
我想通过 CCS3 创建简单的悬停效果，例如默认图像是黑白的，但是当我悬停到该图像时，将显示该图像的实际颜色。 请帮帮我 最佳答案 您可以使用新属性 filter 但浏览器支持不是很深(参见 http
我正在尝试创建一个与图像大小完全匹配的背景颜色叠加层，并在该叠加层上显示文本。但是背景颜色也覆盖了文字，希望有人帮我解决这个问题。 HTML
我想创建像这张图片这样的输入 enter image description here 我从 stackoverflow 看到了这个链接 Skew Input Border Without Skewi
问题是 rgba 透明度。我应该改变它的背景并使其透明。但是，它只是改变了背景颜色，并没有使其透明。 我经常遇到这个问题，有时有效，有时无效。 我试图弄清楚为什么有时它不起作用，即使我的编码方式与其他
我只是想为图像添加背景颜色 (rgba)，但不起作用。 我的 CSS 是: section{ width:100%; height:400px; background: url(../img/back
我是一名优秀的程序员,十分优秀！