Question

我一直在为网站制作一个流畅的滚动导航栏。我设法让导航栏滚动到HTML文档中的不同部分，我一直试图让导航栏链接变为活动状态，具体取决于您所在网页的部分。

在玩完代码后，我无法弄清楚如何做到这一点。我需要做什么？

这是我的代码：

$('#navbar li').click(function() {
  $(this).addClass('active').siblings('li').removeClass('active');
});

@import url(https://fonts.googleapis.com/css?family=Maven+Pro:400,900,700,500);
html{
  font-family: 'Maven Pro', sans-serif;
}
body{
  background:fixed
    url(images/bright_squares.png) #cccccc;
  position:relative;
  padding:0;
  margin:0;
}
#home {padding-top:50px;height:500px;color: #fff; background-image:url(images/random_grey_variations.png);}
#about {padding-top:50px;height:500px;color: #fff;}
#portfolio {padding-top:50px;height:500px;color: #fff;}
#contact {padding-top:50px;height:500px;color: #fff;}

background-dark{
  background:fixed
    url(images/random_grey_variations.png);	
}

#navbar {
  position:fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 60px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #222;
  font-family: 'Maven Pro', sans-serif;
  font-size: 18px;
  font-weight: 300;
}

#navbar li {
  position: relative;
  float: left;
  line-height: 60px;
  background: inherit;
  text-align: center;
  transition: all .2s;
}

#navbar li a {
  position: relative;
  display: block;
  padding: 0 20px;
  line-height: inherit;
  color: white;
  text-decoration: none;
}

#navbar li:before {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -30px;
  width: 60px;
  height: 60px;
  background: #222;
  border-radius: 50%;
  transform: rotate(45deg);
  transition: all 0, background .2s;
}
#navbar li:hover:before {
  margin-top: 1px;
  border-radius: 50% 50% 0 50%;
  transition: all .1s, background .2s, margin-top .2s cubic-bezier(.5,30,.2,0);
}
#navbar li:hover,
#navbar li:hover:before {
  background: #3a3a3a;
}
#navbar li.active,
#navbar li.active:before {
  background: steelblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul id="navbar">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#portfolio">Portfolio</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

<div id="home">
  <h1>Welcome</h1>
  <p>Test</p>
</div>

<div id="portfolio">
  <h1>portfolio</h1>
  <p>Test</p>
</div>

<div id="contact">
  <h1>contact</h1>
  <p>Test</p>
</div>

<div id="about">
  <h1>About Me</h1>
  <p>Test</p>
</div>

Answer 1

我认为这可能会回答你的问题。只需在您已有的点击功能中添加此代码即可。

$($(this).children().attr('href')).addClass('selected').siblings('div').removeClass('selected');

您需要将主页链接更改为#home，而不是#tore

Answer 2

如果你想放弃所有这些，这里的版本更快。

<script>
    $('#navbar li').click(function() {
        $(this).addClass('active').siblings('li').removeClass('active');
        var x = $($(this).children().attr('href')).first().offset().top
        $('body').animate({
          scrollTop: x
        }, 2000);
    });
</script>

这将添加我认为您正在寻找的滚动动画。

使用活动类平滑滚动导航

2 个答案: