Question

我试图找到解决办法，但我不能。我的滚动间谍无法正常工作

这是导航html。

<nav class="menu">
    <ul>
      <li><a class = "active" href="#" data-scroll = "home">Home</a></li>
      <li><a href="#" data-scroll = "about">About</a></li>
      <li><a href="#" data-scroll = "about">Our Work</a></li>
      <li><a href="#" data-scroll = "about">Clients</a></li>
      <li><a href="#" data-scroll = "about">Contact</a></li>
    </ul>
  </nav>

我的CSS CSS只是增加了一次，因为我认为CSS存在问题，但是在网站上它看起来还不错，并且悬停和活动效果正在起作用，但滚动时却无法起作用。

.menu{
 z-index: 100; 
 position: fixed;
 top: 0;
 left: 25%;
 width: 50%;
 overflow: hidden;
  background-color: transparent;
   /* padding: 20px 0; */


}
.menu ul{

  margin: 5px;
  padding: 0;
  text-align: center;


}
.menu ul li{

  list-style: none;
  margin:0 20px ;
  display: inline;
}
.menu ul li a {
  color: black;
  font-size: 1em;
  line-height: 1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 3px 8px;
  transition: 0.5s;

} 
.menu ul li a.active{
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  color:  #FFC300 ;
}  
.menu ul li:hover{
  border-bottom: 1px solid black;
}
/* On scroll */
.menu.scroll{
  background: yellow;
}

还有mj jquery / javascript。我是刚接触Jquery的新手，所以我不太确定此代码是否正确，并且大多数在线代码都不适合我。

$('nav a').on('click', function() {

    var scrollAnchor = $(this).attr('data-scroll'),
            scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]').offset().top - 28;

    $('body,html').animate({
            scrollTop: scrollPoint
    }, 500);

    return false;

})


$(window).scroll(function() {
    var windscroll = $(window).scrollTop();
    if (windscroll >= 100) {
            $('nav').addClass('fixed');
            $('.content section').each(function(i) {
                    if ($(this).position().top <= windscroll - 20) {
                            $('.menu ul li a.active').removeClass('active');
                            $('.menu ul li a ').eq(i).addClass('active');
                    }
            });

    } else {

            $('nav').removeClass('fixed');
            $('.menu ul li a.active').removeClass('active');
            $('.menu ul li a.first').addClass('active');
    }

}).scroll();

有人可以提供一些好的建议或教程吗？

单页上的主动滚动网站无法正常工作

0 个答案: