Question

嘿所以我正在这个网站上工作，我学会了如何使用Navbar做这件事，所以颜色渐渐消失，我开始工作后无法获得任何链接。据我所知，它与 e.preventDefault（） 有关，但我不知道如何解决这个问题。

这是我的代码

$(window).scroll(function() {
// 100 = The point you would like to fade the nav in.
  
	if ($(window).scrollTop() > 100 ){
    
 		$('.bg').stop().animate({
   		opacity : 0.5
   	}, 10 );
    
  } else {
    
		$('.bg').stop().animate({
   		opacity : 0.0
   	}, 200 );				
    
 	};   	
});

$('.scroll').on('click', function(e){		
	e.preventDefault()
    
  $('html, body,').animate({
      scrollTop : $(this.hash).offset().top
    }, 1500);
});

/****NAV*****/
body{
	background-color: #000;
	 font-family: 'Trebuchet Ms';
	
}

.container {
  width: 100%;
  height: 2000px;
  position: relative;
/*  font-family: 'Trebuchet Ms';*/
}

.bg {
  background: #777;
  width: 100%;
  height: 100px;
  opacity: 1;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

ul {
	height: 100px;
	margin: -70px auto 0 auto;
	width: 500px;
}

li {
  float: left; 
  list-style: none;
  margin: 10px 20px;
  text-transform: uppercase;
/*  letter-spacing: 0px;*/
  color: wheat;
}
li a {
/*	height: 100px;*/
  text-transform: uppercase;
  color: wheat;
	font-family: 'Trebuchet Ms';
	font-size: 
}

/*
a {
  text-align: center;
  font-size: 50px;
  color: #bdbdbd;
  font-weight: bold;
  text-decoration: none;
  letter-spacing: 5px;
  text-shadow: 1px 1px 1px #949494;
  
  position: relative;
  z-index: 1;
  margin: 0 auto;
  display: block;
}


a:hover {
  color: #a6a6a6;
  text-shadow: 1px 1px 1px #C9C9C9;
}
*/
a {
	border-style: none;
}
a:link {
	text-decoration: none;
}

a:hover {
	color:wheat;
}

a:active {
	color: #2c9d91;
	text-decoration: inherit;
}


.down {
  top: 150px;
}

.up {
  top: 1800px;
}

/*******OVERLAY*******/

#writingoverlay {
	position: fixed;
	right: 0; 
	bottom: 0;
	min-width: 100%; 
	min-height: 100%;
	width: auto; 
	opacity: .5;
/*	background: radial-gradient( coral, gray, darkslategray);*/
/*	background: radial-gradien( coral,darkslategray, gray);*/
/*	background: radial-gradient(darkslategray 35%, dimgray, gray);*/
	background: radial-gradient(lightgray, gray, dimgray);
	color: crimson
}
/*
#video-overlay {
	position: fixed;
	right: 0; 
	bottom: 0;
	min-width: 100%; 
	min-height: 100%;
	width: auto; 
	background: linear-gradient(to bottom left, crimson, coral);
	opacity: 0.2;
}
*/


/*****VIDEO FULL SCREEN*****/

video {
  position: fixed;
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto;
  z-index: -100;
}

/*****FOOTER******/
footer {
	color: wheat;
	text-align: center;
	font-size: 20px;
}

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="styles.css">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="main.js"></script>
</head>

<body>
    <div id="top" class="container">

        <div class="fixed">

            <div class="bg"></div>

            <ul class="navBar">
                <li><a href="index.html">home</a>
                </li>
                <li><a href="gal.html">photography</a>
                </li>
                <li><a href="film.html">film</a>
                </li>
                <li><a href="contact.html">contact</a>
                </li>
            </ul>
        </div>



    </div>
    <footer>Contact info.</footer>



    <div id="writingoverlay"></div>
    <!--		<div id="video-overlay"></div>	-->
    <div class="vidOverlay">
        <video id="video" autoplay controls loop muted>
            <source src="/Img/8.mp4" type="video/mp4">
                <source src="/Img/8.webm" type="video/webm">
        </video>
    </div>
</body>

</html>

Answer 1

我认为你错过了/，试着把/index.html，/是你的路径重定向。

  <ul class="navBar">
            <li><a href="/index.html">home</a>
            </li>
            <li><a href="/gal.html">photography</a>
            </li>
            <li><a href="/film.html">film</a>
            </li>
            <li><a href="/contact.html">contact</a>
            </li>
        </ul>
    </div>

Answer 2

这实际上与您的e.preventDefault无关，它与您的不透明度动画有关。基本上，您正在为覆盖链接的div添加不透明度标记。如果要对此进行测试，可以运行整个代码，只使用不同的动画而不是不透明度，例如

height: '150px'

如果您只是编辑css样式标记以在开发者控制台中删除不透明度，也可以看到此效果。

我想如果你改变这个逻辑来使用navbar而不是bg，你就可以使它工作。我相信问题是你有一个div覆盖另一个div，所以你不能点击下面的div。

这适用于我，但显然你必须改变你的css以匹配你需要的东西：

if ($(window).scrollTop() > 100 ){    
    $('.navBar').stop().animate({
        opacity : 0.5
    }, 10);
} else {
$('.navBar').stop().animate({
        opacity : 0.0
    }, 200 );
};

如何使导航栏可单击

2 个答案: