如何使导航栏可点击

Question

嘿，所以我在这个网站上工作，我学会了如何使用导航栏来做这件事，这样颜色就会淡入，在它开始工作后我无法获得任何链接。据我了解，它与 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无关，它与你的不透明度动画有关。基本上，您将不透明度标签添加到覆盖您的 link 的 div。如果你想测试这个，你可以运行你的整个代码，只使用不同的动画而不是不透明度，例如

height: '150px'

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

我认为如果您将此逻辑更改为使用导航栏而不是 bg，您将使其正常工作。我相信问题是你有一个 div 覆盖另一个 div，所以你不能点击下面的 div。

这对我有用，但显然您必须更改 css 以匹配您的需要：

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

如何使导航栏可点击

How to make the Nav bar clickable

html

javascript

css

jquery

preventdefault