如何根据页面滚动使固定的导航栏透明？
[英]How to make fixed navbar transparent based on page scroll?
问题描述
I want mynavbar to be transparent when the page is scrolled to the top, however when the user scrolls I would like it to be made opaque. 
我希望mynavbar在页面滚动到顶部时是透明的，但是当用户滚动时，我希望它变得不透明。 I tried this with javascript, but something still isn't working. 我使用javascript进行了尝试，但是仍然无法正常工作。 http://jsfiddle.net/6A6qy/ http://jsfiddle.net/6A6qy/
function myFunction() { if ($(window).scrollTop() < 50) { document.getElementById("masthead").style.opacity = "0.5"; } }
#masthead { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 50px; background-color: #00a087; opacity: 1; } #container { background-color: blue; height: 1000px; display: block; margin-top: -50px; }
<body onload="myFunction()"> <nav id="masthead"> <!-- Fixed navigation bar content --> </nav> <div id="container"></div> </body>
3 个解决方案
解决方案1
1 2015-08-04 19:48:51
How about this: 这个怎么样：
JS: JS：
// listen for scroll
$(window).scroll( function() {
// apply css classes based on the situation
if ($(".masthead").offset().top > 100) {
$(".masthead").addClass("navbar-scrolled");
} else {
$(".masthead").removeClass("navbar-scrolled");
}
}
CSS: CSS：
.navbar-scrolled {
/* some css for navbar when scrolled */
}
JSFiddle example: http://jsfiddle.net/8ruwnaam/ JSFiddle示例： http : //jsfiddle.net/8ruwnaam/
And then of course you could add some optimization to not apply the classes all the time if they are already there. 然后，当然，您可以添加一些优化措施，以确保在类已经存在的情况下不会一直应用它们。 But it works quite fine without such things as well. 但是如果没有这样的东西，它也可以正常工作。
Additional things: 其他事项：
The first version of this answer and your question use IDs for styling, which is not really a good idea according to a lot of people. 此答案的第一个版本和您的问题使用ID进行样式设置，对于许多人来说，这并不是一个好主意。 Styling IDs goes against the DRY principles, and causes all these funny little problems when you forget to think about CSS specificity. 样式ID违背DRY原则，当您忘记考虑CSS特异性时，会引起所有这些有趣的小问题。 IDs are quite alright for a lot of things when it comes to the logic in the JS or something, but try to use classes for styling. 当涉及到JS中的逻辑之类的东西时，ID对于很多事情来说都还不错，但是请尝试使用类进行样式设计。
解决方案2
0 2015-08-04 19:49:58
You should create an .opaque css class and attach it based on actively scrolling or if scrollTop is < 50: 您应该创建一个.opaque css类，并根据活动滚动或scrollTop <50来附加它：
.opaque {
opacity: 0.5;
}
Then attach that class on('scroll') or at scrollTop (this is using the debounce plugin ): 然后将该类附加到on('scroll')或scrollTop （使用debounce插件 ）上：
function myFunction() {
var $masthead = $('#masthead')
, $window = $(window);
// currently scrolling
$window.scroll($.debounce( 250, true, function(){
$masthead.addClass('opaque');
}));
// done scrolling
$window.scroll($.debounce( 250, function(){
// if at the top, add or keep opaque class
if($(this).scrollTop() < 50) {
if(!$masthead.hasClass('opaque')) {
$masthead.addClass('opaque');
}
} else {
$masthead.removeClass('opaque');
}
}));
}
解决方案3
0 2015-08-04 19:51:49
You need to set it to be transparent by default (as it will be on the top) like that 您需要将其默认设置为透明（因为它将在顶部），像这样
#masthead {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 50px;
background-color: #00a087;
opacity: 0.5; /*edited the opacity to be 50% by default*/
}
then use this script to achieve your needs: 然后使用此脚本来满足您的需求：
$(document).ready(function () {
$(window).scroll(function(){
var ScrollTop = parseInt($(window).scrollTop());
if (ScrollTop < 100) {
document.getElementById("masthead").style.opacity = "0.5";
} else {
document.getElementById("masthead").style.opacity = "1";
}
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.