Question

我制作了一个原本是白色的导航栏，但是当用户向下滚动时，它变得透明。当导航栏在页面顶部为白色时，如果用户悬停，则变为透明，当光标离开时，返回白色。现在，从逻辑上讲，滚动下来时应该会发生同样的事情。我不希望这种情况发生，而是希望导航栏保持透明。所以我写了下面的代码，但它没有用。

var color = $('.nav a').css("color")
    if (color == rgb (0,0,249) ) {
        $(".nav a").mouseenter(function(){
            $(".nav a").stop( true ).animate({
                backgroundColor: 'transparent',
            });

            $(".nav").stop( true ).animate({
                backgroundColor: 'transparent',
            });
        });

        $(".nav a").mouseleave(function () {
            $(".nav a").stop( true ).delay(300).animate({
                backgroundColor: 'white',
            });

            $(".nav").stop( true ).animate({
                backgroundColor: 'white',
            });
        });
    } else {

        $(".nav a").mouseenter(function(){
            $(".nav a").stop( true ).animate({
                backgroundColor: 'transparent',
            });

            $(".nav").stop( true ).animate({
                backgroundColor: 'transparent',
            });
        });

        $(".nav a").mouseleave(function () {
            $(".nav a").stop( true ).delay(300).animate({
                backgroundColor: 'transparent',
            });

            $(".nav").stop( true ).animate({
                backgroundColor: 'transparent',
            });
        });
    }

Answer 1

从这里获得提示：

https://stackoverflow.com/a/7317489/3485669

我向你展示了一个jsFiddle，它根据整个body元素的滚动位置切换一些类（显然，你的选择器将特定于你）：

https://jsfiddle.net/vyxhxq94/1/

由于某种原因，下面的代码片段不会渲染CSS过渡。但是，jsFiddle确实如此。（编辑：似乎渲染的代码段在鼠标输入时无法识别：hover CSS类）

＆＃13;

$("div.body").on("scroll", function(e) { 
	if ($("div.body").scrollTop() > 60) {
  	$("div.nav").addClass("notAtTop").removeClass("atTop");
  } else {
  	$("div.nav").addClass("atTop").removeClass("notAtTop"); 
  }
});

＆＃13;

div.nav {
  position: fixed;
  width: 100%;
  top: 0%;
  left: 0%;
  z-index: 9999;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.atTop { 
  background-color: white;
}
.atTop:hover { 
  background-color: transparent;
}

.notAtTop { 
  background-color: transparent;
}
.notAtTop:hover { 
  background-color: transparent;
}

div.body {
  position: relative;
  background-color: green;  
  margin-top: 60px;
  height: 100vh;
  overflow: scroll;
}
div.innerBody {
  height: 4000px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav atTop">
	<h3>
		<a>This is your nav bar.</a>
		<span id="scrollTop">0</span>
	</h3>
</div>
<div class="body">
	<h1>
		This is the rest of your body.
	</h1>
	<div class="innerBody">
		Some lengthy content...
	</div>
</div>

＆＃13;

Answer 2

好的，我找到了使用颜色的答案。

var trans=false;
// Navigation function
    $(".nav").mouseenter(function(){
        var colore="rgba(255, 255, 255, 0)";
        if($(".nav").css('background-color')==colore){
            trans=true;
        }else{
            trans=false;
        }
        $(".nav a").stop( true ).animate({
            backgroundColor: 'transparent',
        });

        $(".nav").stop( true ).animate({
            backgroundColor: 'transparent',
        });
    });

    $(".nav").mouseleave(function () {
        if(trans==false){
        $(".nav a").stop( true ).delay(300).animate({
            backgroundColor: 'white',
        });

        $(".nav").stop( true ).animate({
            backgroundColor: 'white',
        });
        }
    });

根据元素颜色控制mouseenter的作用

2 个答案: